CSS常见技巧

2016-05-26  本文已影响0人  盖被吹空调

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

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

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

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

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

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

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

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

Background-size各属性演示

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

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

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


opacity.png

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

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

两种透明度区别.png
上一篇 下一篇

猜你喜欢

热点阅读