这是我参与更文挑战的第3天,活动详情查看: 更文挑战
filter属性
filter CSS属性
将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。
原图
blur(px) 模糊
函数将高斯模糊应用于输入图像。值越大越模糊,默认是0,不设置模糊。单位是px,不接受百分比值。
.img {
margin-left: 50px;
filter: blur(5px);
}
brightness(%) 亮度
函数将线性乘法器应用于输入图像,使其变暗或变亮。值为 0% 生成全黑图像。值为 100% 保持不变。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。可以使用百分比也可以使用数表示。
.img1 {
margin-left: 50px;
filter: brightness(0%);
}
.img2 {
margin-left: 50px;
filter: brightness(50%);
}
.img3 {
margin-left: 50px;
filter: brightness(1);
}
.img4 {
margin-left: 50px;
filter: brightness(2);
}
contrast(%) 对比度
调整输入图像的对比度。值是 0% 的话,图像变灰。值是 100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。可以使用百分比也可以使用数表示。
.img1 {
margin-left: 50px;
filter: contrast(0%);
}
.img2 {
margin-left: 50px;
filter: contrast(50%);
}
.img3 {
margin-left: 50px;
filter: contrast(1);
}
.img4 {
margin-left: 50px;
filter: contrast(2);
}
drop-shadow(x偏移,y偏移,模糊范围,颜色) 投影
x偏移,y偏移 (必须)。这是设置阴影偏移量的两个 <length>
值。如果两个值都是 0, 则阴影出现在元素正后面。
模糊范围 (可选)。值越大,越模糊。阴影会变得更大更淡.不允许负值 若未设定,默认是0 。
颜色 (可选)。查看 <color>
了解该值可能的关键字和标记。若未设定,颜色值为浏览器默认颜色。
.img1 {
margin-left: 50px;
filter: drop-shadow(16px 16px);
}
.img2 {
margin-left: 50px;
filter: drop-shadow(16px 16px 10px);
}
.img3 {
margin-left: 50px;
filter: drop-shadow(16px 16px 10px black);
}
.img4 {
margin-left: 50px;
filter: drop-shadow(16px 16px 40px black);
}
grayscale(%) 灰度
将改变输入图像灰度。值为 100% 则完全转为灰度图像,值为 0% 图像无变化。值在0%到100%之间,则是效果的线性乘子。超过100% 和 100%效果相同。若未设置,值默认是0。可以使用百分比也可以使用数表示。
.img1 {
margin-left: 50px;
filter: grayscale(0%);
}
.img2 {
margin-left: 50px;
filter: grayscale(0.5);
}
.img3 {
margin-left: 50px;
filter: grayscale(100%);
}
.img4 {
margin-left: 50px;
filter: grayscale(2);
}
hue-rotate(deg) 色相旋转
给图像应用色相旋转。angle
一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
.img1 {
margin-left: 50px;
filter: hue-rotate(0deg);
}
.img2 {
margin-left: 50px;
filter: hue-rotate(180deg);
}
.img3 {
margin-left: 50px;
filter: hue-rotate(360deg);
}
.img4 {
margin-left: 50px;
filter: hue-rotate(450deg);
}
invert(%) 反转图像
反转输入图像。amount 的值定义转换的比例。100% 的价值是完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间,则是效果的线性乘数。 若值未设置值,默认为 0。
.img1 {
margin-left: 50px;
filter: invert(10%);
}
.img2 {
margin-left: 50px;
filter: invert(50%);
}
.img3 {
margin-left: 50px;
filter: invert(100%);
}
.img4 {
margin-left: 50px;
filter: invert(150%);
}
opacity(%) 透明度
转化图像的透明程度。amount 的值定义转换的比例。值为 0% 则是完全透明,值为 100% 则图像无变化。 若值未设置,值默认是1。该函数与已有的 opacity 属性很相似。
.img1 {
margin-left: 50px;
filter: opacity(10%);
}
.img2 {
margin-left: 50px;
filter: opacity(50%);
}
.img3 {
margin-left: 50px;
filter: opacity(100%);
}
.img4 {
margin-left: 50px;
filter: opacity(150%);
}
saturate(%) 饱和度
函数转换图像饱和度。值为 0% 则是完全不饱和,值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。 若未设置值,默认为 1。
.img1 {
margin-left: 50px;
filter: saturate(10%);
}
.img2 {
margin-left: 50px;
filter: saturate(50%);
}
.img3 {
margin-left: 50px;
filter: saturate(100%);
}
.img4 {
margin-left: 50px;
filter: saturate(150%);
}
sepia(%) 转换为深褐色
将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
.img1 {
margin-left: 50px;
filter: sepia(10%);
}
.img2 {
margin-left: 50px;
filter: sepia(50%);
}
.img3 {
margin-left: 50px;
filter: sepia(1);
}
.img4 {
margin-left: 50px;
filter: sepia(2);
}
url() 获取指向SVG过滤器的URI
该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。
<!DOCTYPE html>
<html lang="en">
<style></style>
<body>
<svg width="230" height="120" xmlns="http://www.w3.org/2000/svg">
<filter id="blurMe">
<feGaussianBlur stdDeviation="5" />
</filter>
<circle cx="60" cy="60" r="50" fill="green" />
<circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
</svg>
</body>
</html>
复合使用
可以同时对一个元素设置多种过滤样式。
.img1 {
margin-left: 50px;
filter: sepia(10%) opacity(10%);
}
.img2 {
margin-left: 50px;
filter: sepia(50%) opacity(30%);
}
.img3 {
margin-left: 50px;
filter: sepia(1) opacity(50%);
}
.img4 {
margin-left: 50px;
filter: sepia(2) opacity(100%);
}
常用方式
背景模糊
<!DOCTYPE html>
<html lang="en">
<style>
.home {
width: 500px;
height: 300px;
margin: 20px auto;
position: relative;
}
.home:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-image: url(./4.jpg);
background-size: 100% 100%;
filter: blur(5px);
z-index: 2;
}
.div {
font-size: 40px;
background-color: bisque;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
text-align: center;
z-index: 3;
}
</style>
<body>
<div class="home">
<div class="div">背景模糊</div>
</div>
</body>
</html>
- 如果对父元素直接设置
filter: blur(5px);
子元素也会在模糊中。这里通过给伪类设置filter属性
,然后使伪类覆盖在原背景上。这就实现了只有背景才模糊的效果。
背景局部清晰
<!DOCTYPE html>
<html lang="en">
<style>
.home {
width: 500px;
height: 500px;
background: url(./4.jpg) no-repeat fixed;
position: relative;
}
.home:after {
content: '';
width: 500px;
height: 500px;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(5px);
z-index: 1;
}
.div {
position: absolute;
left: 35%;
top: 35%;
width: 200px;
height: 100px;
text-align: center;
font-size: 40px;
background: inherit;
z-index: 3;
}
</style>
<body>
<div class="home">
<div class="div">局部清晰</div>
</div>
</body>
</html>
- 模糊效果和背景模糊使用相同方式。这里主要是对背景
background
添加了fixed
定位,让图片固定。修改div的位置来裁剪图片,展示部分内容。