9-2-雪碧图

2016-06-05 本文已影响0人我是小韩

问答

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

雪碧图就是将很多小图标合并成一张图，这样在加载图片时只需要走一次网络请求，然后用background-position定位就可以了

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

img标签适用于经常改变的情况，例如商品的图片，任务的照片信息；
.css背景适用于不会经常改变的情况，例如图标等；

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

title用于显示额外提示文字，鼠标放在元素上面时会显示。
alt用于在无法加载图片时，替代图片显示。

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

背景图片是abc.png、无偏移、不重复

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

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

auto: 自适应
contain: 将图像完全覆盖区域
cover: 图片完全适应区域
兼容性： IE8不兼容

Paste_Image.png

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

div 属于块级元素设置 margin: 0 auto;
图片属于行内元素在父类元素上设置 text-align: center;

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

使用 opacity

opacity：0~1；
filter：alpha（opacity=40）  兼容IE8以下

使用rgba
rgba(255，255，255，0.3） 0.3 是透明度

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

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性
摘抄自博客

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <style>
    .box{
      width: 300px;
      height: 300px;
      font-weight: bold;
      font-size: 30px;
      margin: 20px;
      text-align: center;

    }
    .rgba{
     background: rgba(255,0,0,0.5)
    }
    .opacity{
      background: red;
      opacity: 0.5;
    }
  </style>
  <body>
    <div class="box rgba">
      rgba的不继承，字体没变透明
    </div>
    <div class="box opacity">
      opacity的继承，字体变透明
    </div>
  </body>
</html>

Paste_Image.png