1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
CSS Sprite(雪碧图|精灵图)指该方法是将小图标和背景图像合并到一张图片上，从而减少你的网站的HTTP请求数量，然后利用css的背景定位来显示需要显示的图片部分。
作用：
- 1.减少加载网页图片时对服务器的请求次数。
- 2.提高页面的加载速度。
- 3.减少鼠标滑过的一些bug。
参考css雪碧
2.img标签和CSS背景使用图片在使用场景上有何区别
如果一张图片是网页内容的一部分，就该用img标签，否则就建议用 CSS 背景图。
主要区别在于img标签一般用于需要单独点击生效的图片，这些图片一般是从后台传入的，可以动态交互。
css背景一般用于静态不变的图片。可以是页面LOGO等。
举例：
在京东首页上，经常变化的图片用到img。和链接文字连在一起的，用背景图片。
3.title和 alt属性分别有什么作用
title属性是为标签提供额外的信息说明，例如<a href="xx" title="链接">这是链接</a>，把鼠标放在链接上时，会显示title的内容，以达到补充说明或者提示的效果。
而alt属性是起替代作用的。例如图片<img src="abc.png" alt="图片">，当图片来源出错无法正常显示时，显示alt属性的值。alt是替代图像而不是提供说明。alt属性还可以用于搜索引擎优化。因为搜素引擎是无法直接读取图像的信息的，alt可以为其提供文字信息所以对搜索引擎比较友好。
4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思
背景图片是和html文档同一个文件夹的abc.png，这个图片在这个元素的左上角，而且是不被重复的。可以举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background</title>
<style>
div {
width:500px;
height:500px;
border: 1px solid red;
background: url(abc.png) 0 0 no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
5.background-size有什么作用? 兼容性如何? 常用的值是?
background-size 属性规定背景图像的尺寸。
兼容性由图知，IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
常用的值:
background-size: length/percentage/cover/contain;
| 值 | 描述 |
|---|---|
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为auto。 |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 auto。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-size</title>
<style>
div {
width: 250px;
height: 350px;
background: url(abc.png) no-repeat;
margin-top: 20px;
border: 1px solid red;
display: inline-block;
}
img {
display: block;
}
.item1 {
background-size: 400px 300px;
}
.item2 {
background-size: 100% 100%;
}
.item3 {
background-size: cover;
}
.item4 {
background-size: contain;
}
</style>
</head>
<body>
<img src="abc.png" alt="图片">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</body>
</html>
效果：
最上面的是原图片，原图片大小宽400px，高300px。
.item1 {
background-size: 400px 300px;
}
设置背景的宽高为px时，图片大小变化，但是因为div的宽高有限制，所以只显示出在div范围内的图像。
.item2 {
background-size: 100% 100%;
}
设置宽高为100%时，正好充满整个div空间。
.item3 {
background-size: cover;
}
设置为cover时，图像被放大，使高度完全覆盖空间，但是图片宽度此时大于div的宽度，不能完全显示。
.item4 {
background-size: contain;
}
设置为contain时，图片完全显示在div中，但因图片原始宽度400px比div的宽度250px要大，为使图片完全显示，图片进行了缩放，div中有空白。
cover、contain设置背景图片的size是使图片按原始比例缩放的，如果把上述div的宽度设置为200px,高度设置为150px,则设置cover，contain属性时，背景图片如下图所示：
显示是一样的。
6.如何让一个div水平居中？如何让图片水平居中
让一个div水平居中，可以使用margin: xx auto;，先设置div的宽度，再设置div的左右外边距是auto。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
width:300px;
height: 200px;
border: 1px solid red;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
饥人谷
</div>
</body>
</html>
效果：
让图片水平居中，对它的父元素设置
text-align:center;。举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
width:500px;
height: 500px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="abc.png" alt="图片">
</div>
</body>
</html>
效果：
7.如何设置元素透明? 兼容性？
opacity属性用来设置元素的不透明度。取值0-1。0代表完全透明，1代表完全不透明。
兼容性：所有浏览器都支持 opacity 属性。但IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。
8.opacity和 rgba都能设置透明，有什么区别
主要区别是opacity设置透明，对其子元素也适应。rgba设置透明只对其本身起作用。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.opacity {
width: 100px;
height: 100px;
background: #0f0;
opacity: 0.3;
color: #000;
margin-bottom: 10px;
}
.alpha {
width: 100px;
height: 100px;
background:rgba(0,255,0,0.3);
color: #000;
}
</style>
</head>
<body>
<div class="opacity">
text
</div>
<div class="alpha">
text
</div>
</body>
</html>
效果:
从图中可以看出设置opacity属性的div内部文本的透明度也改变了。而rgba则没有改变文本的透明度。
本文版权归作者和饥人谷所有，转载请注明出处
网友评论