CSS常见技巧

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

• CSS Sprite是一种图片处理方法，就是将众多零散图片拼接成一张大图片，然后应用到背景图片当中。因为每张图片URL都会向服务器发送请求，拖慢网速，影响网站性能，而CSS雪碧图只需要请求一次大图片，性能得到优化。
• URL添加合成图片，然后利用background-position对背景图片定位，再进行样式设置即可。
• 单张图片不高于200KB。

eg:
**1. **现在有两张图片单独的图片：

购物袋素材

**2. **通过使用在线工具，将两张图片，拼接为一张大图：

sprite.png

**3. **如图中的sprite.png就是需要的雪碧图，粘贴图片地址：

通过运用background-image和background-position将图片作为背景放置相应的位置。效果如图：

雪碧图效果图

另外，取值情况如下：

取负值

总结：雪碧图对于网站性能优化的作用非常大，所以即使简单也要熟练掌握，本例只是一个简单的例子，具体的还需要进一步学习。

---

参考：
css sprite 百度百科
AlloyTteam雪碧图工具

---

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

• img标签因为显示的图片不会一尘不变，而且多半具有链接功能，所以对于一个网站上的链接或需要经常更新维护的图片，我们用img标签。
• 背景图片则多用于不经常做改动的图片。
  eg:

京东素材

如图所示，京东的LOGO和购物车图片一般是不会做改动的，所以这里采用 背景图片，而中间的“717吃货节”轮播，以及旁边的海报广告由于经常做变动，对应的是不同的链接，所以要用 img。

---

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

• title既是属性又是标签。单就title属性来说，适用范围较广，几乎所有标签都可以适用title属性，title属性为标签添加建设性信息。
• alt 属性是img标签一个必需的属性，它规定在图像无法显示时的替代文本。
  所以，二者的区别主要在于功能上的差别，在表现上的差别则在img标签中体现，如图所示：

  
    
    
  
  
    ![图片](http://upload-images.jianshu.io/upload_images/2404178-67010d125adc4266.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  

title显示效果

alt效果图

如图所见，当我将地址写错的时候，图片无法显示，此时就会显示alt属性信息。而有些阅读器或者老浏览器都会有不显示图片的情况，所以有alt信息能让人们更好地理解文档。

---

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

“url()”是背景图片的url地址，可以是绝对url，也可是相对url。
“0 0”是背景图片相对位置，第一个是x坐标，第二个是y坐标，“0 0”代表最左上角。
“no-repeat”是设置背景图片不重复。

效果图：

background

---

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

• 作用：background-size设置背景图像的大小尺寸。
• 兼容性：

background-size兼容性

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

eg：

当background-size: 150px 150px;时：

length

当background-size: 50%;时：

50%

当background-size: 80% 80%;时：

80% 80%

当background-size: cover;时：

cover

当background-size: contain;时：

contain

可以看出，cover属性是将扩大图片完全覆盖块区，哪边短哪边就先覆盖，然后按原图比例扩大；contain则是在原图完全包含在区块中的情况下，扩大到整个块区。

参考：CSS3 background-size 属性

---

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

div是块级元素，所以需要用margin: 0 auto;让div水平居中：

    
    
      




    ![图片](http://upload-images.jianshu.io/upload_images/2404178-8c963a9793867c45.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

效果图：

margin: 0 auto

可以看见图片默认情况下并不是水平居中的，由于img是行内元素，所以可以在其父元素样式里添加text-align: center使其水平居中：

    
    
    



    

        ![图片](http://upload-images.jianshu.io/upload_images/2404178-8c963a9793867c45.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

效果图：

text-align: center

---

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

opacity属性能够设置元素的不透明度，取值为0~1，0完全透明，1完全不透明。
eg:

    
    
    



    

        ![图片](http://upload-images.jianshu.io/upload_images/2404178-8c963a9793867c45.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

效果图：

opacity

可以看出，opacity不仅让img元素透明，而且连红色边框也会透明，也就是说所有元素的不透明度都可以进行设置。
兼容性：

opacity.png

---

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

rgba()中的alpha通道也是对元素颜色进行不透明度设置，不过仅作用在元素颜色或背景色。
opacity作用于元素，以及元素内的所有内容的透明度。

    
    
    



    

        test
    
    

    

        test
    

效果图：

不透明度效果图

可以看出，rgba()作用于div的color属性，color属性用于设置内容的颜色，所以只有test透明；而opacity作用于元素内所有内容，所以边框，背景，文字都设置了透明。

---

代码题：
代码1预览
代码2预览
代码3预览

---

本文版权归作者和饥人谷所有，转载请注明来源