CSS常见技巧

CSS Sprite(雪碧图|精灵图)指什么? 有什么作用?

CSSSprites是一种网页图片应用处理方式。它是作用是将一个页面涉及到的所有零星图片都包含到一张大图中去,减少向服务器发送的请求,提高了页面的性能。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

img标签和CSS背景使用图片在使用场景上有何区别?

  • img标签是html的标签,他是具有语义化的标签;而CSS背景图片是CSS的一种样式起装饰作用
  • img标签用于呈现网页实质内容;background-image一般用于网站不变的内容,如一些icon

title和alt属性分别有什么作用?

  • title属性规定关于元素的额外信息,用于链接的描述。当鼠标移至元素时,会显示一段事先设定好的提示文本。
  • alt 属性指定了替代文本,用于在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容。也可在 鼠标移至图像上是显示描述。

background: url(abc.png) 0 0 no-repeat;这句话是什么意思?

设置abc.png为背景图片,不发生偏移(图片位于元素左上角),不产生平铺效果。

background-size有什么作用? 兼容性如何? 常用的值是?

  • background-size规定背景图片的尺寸
  • 兼容性如下图:


    background-size.png
  • 常用的值有
描述
length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

Background-size各属性演示

如何让一个div水平居中?如何让图片水平居中?

  • div的水平居中可设置左右外边距为auto实现,例如:margin: 10px auto;
  • 图片水平居中可在父容器中设置text-align:center;实现
    水平居中.png

如何设置元素透明? 兼容性?

opacity:0~1,兼容性如图:


opacity.png

opacity和rgba都能设置透明,有什么区别?

opacity作用于整个标签内的元素,包括文字图片等等;而rgba只是颜色的一个参数而已。

两种透明度区别.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite把多个背景图片合成为一张,通...
    dengpan阅读 336评论 0 0
  • 一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 1、css sprite是一种图片处理方法,就是将...
    鸿鹄飞天阅读 427评论 0 0
  • 课程目标 熟悉常见的样式写法,如背景图片、居中、透明等 学习建议 问答题一定要动手写 demo,否则学习效果只能达...
    饥人谷_江君阅读 838评论 0 1
  • 1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? 答:CSS Sprite它是一种图片整合技术,该...
    Sheldon_Yee阅读 348评论 0 5
  • 啊啊啊啊,要开始看论文了,感觉时间都不够用,好忧伤。 一.CSS Sprite(雪碧图|精灵图)指什么? 有什么作...
    婷楼沐熙阅读 579评论 7 2