CSS滤镜及精灵技术
Posted 遥岑.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS滤镜及精灵技术相关的知识，希望对你有一定的参考价值。
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>
效果如下：
以上是关于CSS滤镜及精灵技术的主要内容，如果未能解决你的问题，请参考以下文章