<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css中filter属性的使用</title>
<style>
img{
width: 100px;
}
div{
float: left;
text-align: center;
margin-left: 15px;
padding: 4px;
border: 5px groove black;
}
#img1{
filter: blur(5px);
}
#img2{
filter: brightness(120%);
}
#img3{
filter: contrast(335%);
}
#img4{
filter: drop-shadow(8px 8px 10px red);
}
#img5{
filter: grayscale(100%);
}
</style>
</head>
<body>
<div>
<img id='img1' src="zhaoliying.jpg"/>
<h6>blur(px)变模糊</h6>
</div>
<div>
<img id='img2' src="zhaoliying.jpg"/>
<h6>brightness(px)调整图像的亮度</h6>
</div>
<div>
<img id='img3' src="zhaoliying.jpg"/>
<h6>contrast(%)调整图像的对比度</h6>
</div>
<div>
<img id='img4' src="zhaoliying.jpg"/>
<h6>drop-shadow调整图像阴影</h6>
</div>
<div>
<img id='img5' src="zhaoliying.jpg"/>
<h6>将图像转换为灰阶</h6>
</div>
</body>
</html>
滤镜 | 描述 |
---|---|
none | 默认值。规定无效果。 |
blur(px) | 对图像应用模糊效果。较大的值将产生更多的模糊。 如果为指定值,则使用 0。 |
brightness(%) | 调整图像的亮度。
|
contrast(%) | 调整图像的对比度。
|
drop-shadow(h-shadow v-shadow blur spread color) | 对图像应用阴影效果。 可能的值:
blur -可选。这是第三个值,单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多(阴影会变得更大更亮)。不允许负值。如果未规定值,会使用 0(阴影的边缘很锐利)。 spread - 可选。这是第四个值,单位必须用像素。正值将导致阴影扩展并增大,负值将导致阴影缩小。如果未规定值,会使用 0(阴影与元素的大小相同)。 注释:Chrome、Safari 和 Opera,也许还有其他浏览器,不支持第 4 个长度;如果添加,则不会呈现。 color - 可选。为阴影添加颜色。如果未规定,则颜色取决于浏览器(通常为黑色)。 这个例子创建了红色的阴影,水平和垂直方向均为 8px,带有 10px 的模糊效果: filter: drop-shadow(8px 8px 10px red); 提示:这个滤镜类似 box-shadow 属性。 |
grayscale(%) | 将图像转换为灰阶。
注释:不允许负值。 |
hue-rotate(deg) | 在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg,代表原始图像。 注释:最大值是 360deg。 |
invert(%) | 反转图像中的样本。
注释:不允许负值。 |
opacity(%) | 设置图像的不透明度级别。opacity-level 描述了透明度级别,其中:
注释:不允许负值。 提示:这个滤镜类似 opacity 属性。 |
saturate(%) | 设置图像的饱和度。
注释:不允许负值。 |
sepia(%) | 将图像转换为棕褐色。
注释:不允许负值。 |
url() | url() 函数接受规定 SVG 滤镜的 XML 文件的位置,并且可以包含指向特定滤镜元素的锚点。实例: filter: url(svg-url#element-id) |
initial | 将此属性设置为其默认值。 |
inherit | 从其父元素继承此属性。 |