CSS滤镜
filter 属性定义了元素(通常是 <img> )的可视效果。
滤镜通常使用百分比,也可以使用小数表示。
任何版本的IE当前均不支持CSS3滤镜效果,较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果,但该功能已弃用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 高斯模糊 */
.c1 {
width: 280px;
height: 230px;
-webkit-filter: blur(2px);/*适应谷歌浏览器的内核*/
filter: blur(2px);
}
/* 设置图像亮度 */
.c2 {
width: 280px;
height: 230px;
-webkit-filter: brightness(200%);
filter: brightness(200%);
}
/* 调整图像对比度 */
.c3 {
width: 280px;
height: 230px;
-webkit-filter: contrast(50%);
filter: contrast(50%);
}
/* 设置图像阴影效果 */
.c4 {
width: 280px;
height: 230px;
-webkit-filter: drop-shadow(2px 3px 2px pink);
filter: drop-shadow(2px 3px 2px pink);
}
/* 设置图像灰度 */
.c5 {
width: 280px;
height: 230px;
-webkit-filter: grayscale(40%);
filter: grayscale(40%);
}
/* 反转效果 */
.c6 {
width: 280px;
height: 230px;
-webkit-filter: invert(80%);
filter: invert(80%);
}
/* 设置图像透明度 */
.c7 {
width: 280px;
height: 230px;
-webkit-filter: opacity(60%);
filter: opacity(60%);
}
/* 棕褐色效果 */
.c8 {
width: 280px;
height: 230px;
-webkit-filter: sepia(70%);
filter: sepia(70%);
}
/* 设置图像饱和度 */
.c9 {
width: 280px;
height: 230px;
-webkit-filter: saturate(120%);
filter: saturate(120%);
}
</style>
</head>
<body>
<img class="c1" src="./images/1.jpg">
<br>
<img class="c2" src="./images/1.jpg">
<br>
<img class="c3" src="./images/1.jpg">
<br>
<img class="c4" src="./images/1.jpg">
<br>
<img class="c5" src="./images/1.jpg">
<br>
<img class="c6" src="./images/1.jpg">
<br>
<img class="c7" src="./images/1.jpg">
<br>
<img class="c8" src="./images/1.jpg">
<br>
<img class="c9" src="./images/1.jpg">
</body>
</html>
filter | 描述 |
---|---|
blur(px) | 设置高斯模糊(默认值为0) |
brightness(%) | 设置图像亮度,0为全黑,值可以超过1(默认值为1) |
contrast(%) | 调整图像对比度,0为全黑,值可以超过1(默认值为1) |
drop-shadow(水平偏移 垂直偏移 模糊 阴影颜色) | 设置图像阴影效果,阴影合成在图像下方 |
grayscale(%) | 设置图像灰度,值在0-1之间(默认值为0) |
invert(%) | 反转效果,值在0-1之间(默认值为0图像不变) |
opacity(%) | 图像的透明程度,值在0-1之间(默认值为1) |
sepia(%) | 棕褐色效果,值在0-1之间(默认值为0) |
saturate(%) | 调整图像饱和度,值可以超过1(默认值为1图像不变) |
CSS精灵技术(sprite)
网页图片处理方式,把零星小图片整合起来,载入速度更快(不高于200kb的图片载入时间相差不大,减少图片加载向后台服务器发送请求的次数)。
background-position 通过改变背景图片的位置,从而显示出我们想要显示出来的部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 70px;
height: 500px;
background: url(./images/T\(4N{L_J`%`ENZKN``NVZGF.jpg) no-repeat;
}
.test {
width: 16px;
height: 19px;
background-position: 0 -35px;
}
</style>
</head>
<body>
<div></div>
<div class="test"></div>
</body>
</html>
效果如下: