CSS常见技巧

css Sprite(雪碧图丨精灵图)指什么？有什么作用

雪碧图就是把一些小图片利用软件合并到一张图片上，利用position的方法定位。
可以减少网络请求，加快网页显示速度。

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

在不用有点击作用、只是修饰作用并且不长更换的使用背景图片。
对于需要和用户有交互效果的，或者点击有链接效果的使用img

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

title是鼠标滑过选定元素（停留）时显示的描述性文字，可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。

alt是选定元素不能显示时显示的文字，它可以比title更明确地告诉使用者不能显示的是什么内容，alt是必要的属性，alt属性只能用在img、area和input元素中。

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

是用url引用图片abc.png作为背景，即用图片作为背景。
0 0是图片的偏移数，第一个0是X轴偏移量，第二个0是Y轴偏移量，0 0即是偏移量都为0。 no-repeat是不重复，repeat是重复，即引入一张图片是显示一张还是有序排列。

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

background-size：规定背景图像的尺寸。background-size:100px 100px; 设定背景图像尺寸宽高为100像素。宽高数值不能为负值。
常用的值：
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
cover：使背景图像比内容区域要大，完全填满内容区域，由于是完全填满，所以有些部分不可见
length：设置背景图像宽度和高度
percentage：以父元素的百分比来设置宽和高

    
    
    


    
1
    
2
    
3
    

        
4
    5

background-size

background-size兼容性

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

div为块级元素，可以用margin:0 auto; 上下边距为0，左右自动的方法居中。
图片为行内元素，可以用text-align:center;居中

居中

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

元素透明使用opacity，opacity:0.0即使全透明，opacity:1.0就是不透明，
0.0到1.0之间透明度会逐渐加深。

opacity兼容性

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

opacity对元素使用，rgba只能对背景使用。
opacity对子元素有影响，rgba没有影响。

****本文章版权属 饥人谷_张世钧和饥人谷 所有，如需转载请务必注明出处。****