CSS常见技巧

字数 537阅读 30
CSS Sprite(雪碧图|精灵图)指什么? 有什么作用?

CSS Sprite是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。
用CSS Sprite能减少网络请求,提高页面加载速度,修改图片也更方便。

img标签和CSS背景使用图片在使用场景上有何区别?
  • 通常是非内容的图片就用background(用来修饰页面的元素),如果是内容性的图片就用img。
  • 会变动的和可点击的用img,不变的和不可点击的用background。
title和alt属性分别有什么作用?

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方。
title属性是在你鼠标悬停在该图片上时显示一个小提示,鼠标离开就没有了,有点类似jQuery的hover。
HTML的绝大多数标签都支持title属性,title属性就是专门做提示信息的。


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

设置背景图片用abc.png,位置从左上开始显示不偏移,不重复。

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

作用:用来规定背景图像的尺寸。

兼容性:


background-size兼容性

常用值:

描述
length 设置背景图像的高度和宽度。
percentage 以父元素的百分比来设置背景图像的宽度和高度。
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
如何让一个div水平居中?如何让图片水平居中?

div设置margin:0 auto可以让div水平居中。
设置父容器text-align:center可以使图片水平居中。

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

opacity和rgba都可以设置元素透明。
兼容性:


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

opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性。

opacity 和 rgba

 
 
 
 
本教程版权归作者和饥人谷所有,转载须说明来源!

推荐阅读更多精彩内容