日夜谈——CSS常见技巧

sprite.png

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

答：CSS Sprite它是一种图片整合技术，该方法是通过将多张图片整合到一张图片上，然后通过background-position来定位要显示的部分。

作用：

由于将各个小图片整合在一起，因此在加载页面时，可以减少去服务器请求的次数，加快页面加载速度。

减少图片文件的大小，最终达到网站性能优化的目的。

以下是dome：
尝试用Css Sprite将多张图片整合在一起：

weibo.png

QQ.png

alibaba.png

上图分别是3张图片，如果使用如下代码设置导航左侧的icon会产生4张图片，在访问页面时会产生3次request，不利于页面性能优化，浪费带宽和内存。

3次请求.png

整合结果：

若使用Css Sprite技术可以使得3张图片整合为1张图，在利用background-position属性实现一张图在同一区域的重复使用。

result.png

上图所示，四张图片通过CSS Sprite技术整合成一张图片，既减小的图片的大小和命名多张图片的麻烦，也减少访问服务器的次数。

整合.png

代码结果

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

答：如果一张图片是网页内容的一部分，就该用img,否则建议用CSS背景图。要注意logo是否属于网页内容的一部分。

img标签属于html的范畴，本质是语义化的显示图像的标签

background-image属性是css范畴的内容，本质是为元素设置背景图的属性
选择器{background:url(#);}

在页面加载方式上，img标签作为文档内容的一部分，会随页面加载时同时加载进来；
background-image作为样式，要等页面加载完后背景才开始加载

综合来说，img是一个语义化标签，图像应该是页面内的内容，有实际的意义，而background:url(#)是css的一个属性，图像只是起到背景装饰布局作用，不具备实际语义。

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

title属性可以作用于所有元素中，常用于显示元素的提示性信息。当鼠标移至元素时，会显示一段事先设定好的提示文本。

alt属性作为一种局部变量，作用于input（对于图像按钮）和img元素，当图片无法显示或者禁止显示图片时，作为图片的替代文本，对图片进行说明。

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

1.background: url(abc.png) 0 0 no-repeat;设置背景的属性；
2.url(abc.png):背景图片的位置；
3.0 0 no-repeat:（0 0）设置该图片的位置（左上角），（no-repeat）设置图片只显示一次。
例如：

测试.png

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

答：background-size:用于控制背景图片的大小。

兼容性：

兼容性.png

常用的值是：

值	描述
length	设置背景的宽高，第一个值为宽度，第二个为高度，若只设置一个值，第二值默认为auto
percentage	以父元素的百分比设置背景的宽高
cover	将图像扩展至完全覆盖背景区域（图像尺寸等比例扩展）
contain	将图像扩展至宽高完全适应背景区域

这篇文章深入理解cover和contain的区别！！！

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

div水平居中可以使用margin:0 auto;示例：

demo1.png

图片通过img标签嵌套入div，再使用text-align：center
属性来设置

demo2.png

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

可以使用如下方法：
1.可以使用opacity:x的取值从0-1。

opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera.

filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1.

-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。

-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
来源：CSS透明属性详解

opacity兼容性：

opacity.png

2.rgba(red green blue alpha),alpha的取值从0-1

rgba兼容性：

rgba.png

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

opacity是Css属性的范畴，作用于元素（包括这个元素和元素内部的元素）即是具有继承性；

rgba则是属性的值的范畴，仅仅只是作用在当前元素，没有继承性。

For example：

opacity:

opacity例子.png

rgba:

rgba 例子.png

参考：
Css sprite原理及其探索
img和background-image的各种区别
CSS3的rgba
CSS3 Backgrounds相关介绍
when you use img vs css background-img

注：版权归饥人谷peter和饥人谷所有，若有转载请注明来源

感谢观众：

gaki笑容.png