雪碧图/css

opacity:0.5;
filter:alpha(opacity=100); /* For IE8 and earlier */

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

雪碧图就是指网站上一些小的图标、logo合并到一张图片上,通过 background-position属性来控制。
可以减少网络请求,节约资源。

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

对于固定不变的内容,如图标等用css背景;对于可变的内容,图片和内容相关,用img标签;

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

  • title:设置鼠标悬停在元素上时显示的文字;
  • alt:设置图片不能显示时,代替显示的文字。

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

给元素设置一张url为abc.png的背景图片,在元素的左上角显示,不平铺。

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

background-size用来设置背景图片的大小,常用的值有:

  • auto:默认值,不改变图片的原始高度和宽度
  • <长度值>:成对出现,如,background-size:200px 50px,分别是宽高。如果只设置了一个值,则将其作为图片宽度值来等比缩放;
  • <百分比>:背景图片的宽高依次设为所在容器的宽高乘以这百分比;
  • cover:等比缩放直至填充满整个容器;
  • contain:等比缩放直至某一边贴紧容器边缘为止。

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

1.div设置居中的方法:

  • 给定一个宽度,然后设置margin: 0 auto;;
  • 把它放在table标签内(利用table标签的长度自适应性),然后设置margin: 0 auto;

2.图片居中的方法:对图片的父容器设置 text-align: center;

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

  • opacity:0.2;,IE8部分支持, 其他浏览器均支持;
  • filter:alpha(20);,IE8及以下,其它主流浏览器都支持;

8.opacityrgba都能设置透明,有什么区别?

opacity会影响所有后代元素,rgba不会影响后代元素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,805评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,337评论 0 11
  • 大盘持续五天在3200点下方震荡,短期迎来调整的走势较大,前期涨幅较大的白马股纷纷出现调整破位走势,风险较大,这个...
    慧珍老师阅读 176评论 0 0
  • 可能阅读的初衷不是很正经,我竟然是在耽美书荒的时候去看的它。一个坚决地斗争着自己倒错性欲的又单纯又“邪恶”的人(...
    xxm2233阅读 1,986评论 0 0