CSS常见技巧
CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
-
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的
background-image，background- repeat，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。 -
作用：利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.clock{
width:120px;
height:110px;
background-image:url(http://img.taopic.com/uploads/allimg/140622/234915-1406221T51398.jpg);
}
.s1{background-position:-15px -10px;} .s2{background-position:-15px -120px; } .s3{ background-position:-15px -230px; } .s4{ background-position:-15px -330px; } </style> </head> <body> <div class="clock s1"></div> <div class="clock s2"></div> <div class="clock s3"></div> <div class="clock s4"></div> </body> </html>
效果
img标签和CSS背景使用图片在使用场景上有何区别
- img标签适合图片内容会变化，如点击会跳转
- CSS背景则适合图片内容基本不会变化的
title 和 alt属性分别有什么作用
-
title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本 -
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
这是刘亦菲
[站外图片上传中……(2)] </body> </html>
效果
background: url(abc.png) 0 0 no-repeat;这句话是什么意思
-
background的属性值含义依次为背景图片（括号里面是图片地址）、坐标（X轴、Y轴）、是否要重复（当图片不够填满整个容器时，会默认重复显示图片，直到填满容器为止）。
-
background-position：默认左上角
-
X轴向右为负，Y轴向下为负
-
只写一个单位，则默认为X轴，Y轴居中
-
[top | center | bottom] [left | center | right]
-
x% y%
-
background-repeat
-
no-repeat：背景图片在规定位置
-
repeat-x：图片横向重复
-
repeat-y：图片纵向重复
-
repeat：全部重复
background-size有什么作用? 兼容性如何? 常用的值是?
- background-size 属性规定背景图像的尺寸。
length
设置背景图像的高度和宽度。 - 设置多重背景，可以设置用逗号分隔的多个值。
| 值 | 描述 |
|---|---|
| length | 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。类似于图像为容器 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.img{
width:200px;
height:200px;
border:1px solid black;
background:url("http://ent.taiwan.cn/mlkp/201606/W020160628393199389482.jpg" ) no-repeat;
display:inline-block;
}
.length{
background-size:100px;
}
.percentage{
background-size:70%;
}
.cover{
background-size:cover;
}
.contain{
background-size:contain;
}
</style>
</head>
<body>
<div class="img length"></div>
<div class="img percentage"></div>
<div class="img cover"></div>
<div class="img contain"></div>
</body>
</html>
效果
如何让一个div水平居中？如何让图片水平居中
-
div水平居中（块级元素）:
margin: 0 auto -
图片水平居中（行内元素）:
display: table-cell;text-align: center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.img{
width:400px;
height:400px;
border:1px solid black;
display:table-cell;
text-align:center;/水平居中/
vertical-align:middle;/垂直居中/
}
</style>
</head>
<body>
<div class="img">
</div></body> </html>
效果
如何设置元素透明? 兼容性？
- opacity：0~1
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
} - rgba：
rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
补充：border 中transparent 边框颜色为透明。
rgba
opacity
opacity 和 rgba都能设置透明，有什么区别
- opacity所设置的属性可以被子元素继承，而rgba不可被子元素继承。
代码
效果
本文版权归饥人谷_Nick和饥人谷所有，转载请注明来源
