问答
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
网友评论