CSS常见技巧

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

• 雪碧图是运用在需要很多小图标小图片的场合，将很多小尺寸的图片集合在一张大图上，使用时通过background属性选择所需图片的位置、大小。
• 使用雪碧图将原本需要多次进行数据请求的操作，变为一次请求所有需要的数据，减少请求次数就减少的页面加载的时间。
• 雪碧图可以使用 http://csssprites.com/ 进行合成，选择所有需要的图片之后点击GENERATE即可生成，注意不要上传较大的图片，而且这也不符合雪碧图的用处。

csssprites.com

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

• 在图片是需要被展示的内容的一部分的时候使用img标签，alt属性可以在图片未能展现出来的时候对内容进行提示，并且对SEO友好
• img标签的图片用户可以方便的保存Logo或者复制Logo图片的链接
• 当图像不是内容的时候使用background-image，当小图标使用雪碧图的时候使用background-image

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

• title属性是鼠标移动到元素上显示的提示标签，是对元素的补充解释和说明
• alt属性是在元素加载不出来的时候，显示在页面上的文字，用来解释说明这个没有被显示出的元素。

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

• 等效于

    background-image: url(abc.png );//设定图片地址
    background-position: 0 0;//设定背景图片的位置
    background-repeat: no-repeat;//设定不重复
  

• 此外background还有其他可能的属性：

属性	作用
background-color	设定背景颜色
background-size	设定背景图片尺寸
background-origin	设定定位区域
background-clip	设定绘制区域
background-attachment	设定背景图像是否固定

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

• 用以设定背景图片的尺寸，可能的值有
  • cover 把背景图像扩展为足够大，使背景图像完全覆盖区域，背景图像的某些区域可能超过显示范围。
  • contain 使图像在内容区域尽量大的完整显示，并长宽比不变。
  • 也可以直接设定宽度和高度，例如 80px 90px ，第一个值设定宽度，另一个设定高度，如果只设定一个值，第二个值为auto。
• 还可以相对父元素的百分比来设定宽高，例如 15% 100%，第一个值设定宽度，另一个设定高度，如果只设定一个值，第二个值为auto。

• 兼容性上，支持IE9以上的浏览器，不支持IE8

  
  background-size兼容性

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

• 可以设置margin: 0 auto; 使块级元素居中。注意块级元素本身是充满一整行的，所以前提是给这个块级元素设定一个宽度。
  

  div居中

• 给图片的父元素上添加text-align: center;属性即可，这个属性作用在块级元素，使其内部的行内元素水平居中。

• 示例：http://js.jirengu.com/wofonecose/3/edit

示例

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

• opacity: 0~1;使元素及子元素透明

  
  opacity兼容性

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

• opacity使元素整体透明，是元素的属性；rgba将颜色设置为透明，是颜色的属性，不涉及子元素。
• 示例：http://js.jirengu.com/zexohajuda/1/edit

示例

---

本教程版权归 张宇 和 饥人谷 所有，转载需要说明来源