css中filter的功能测试

最新推荐文章于 2023-10-31 17:31:32 发布

Gjanuary

最新推荐文章于 2023-10-31 17:31:32 发布

阅读量429

点赞数

分类专栏：前端学习记录文章标签： css

本文链接：https://blog.csdn.net/Gjanuary/article/details/121674761

版权

前端学习记录专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!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(%)	调整图像的亮度。 0％将使图像完全变黑。默认值是 100％，代表原始图像。值超过 100％将提供更明亮的结果。
contrast(%)	调整图像的对比度。 0％将使图像完全变黑。默认值是 100％，代表原始图像。超过 100％的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color)	对图像应用阴影效果。可能的值： h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。 v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。 blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。 spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。注释：Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。 color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。这个例子创建了红色的阴影，水平和垂直方向均为 8px，带有 10px 的模糊效果： filter: drop-shadow(8px 8px 10px red); 提示：这个滤镜类似 box-shadow 属性。
grayscale(%)	将图像转换为灰阶。 0% (0) 是默认值，代表原始图像。 100％将使图像完全变灰（用于黑白图像）。注释：不允许负值。
hue-rotate(deg)	在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。注释：最大值是 360deg。
invert(%)	反转图像中的样本。 0% (0) 是默认值，代表原始图像。 100％将使图像完全反转。注释：不允许负值。
opacity(%)	设置图像的不透明度级别。opacity-level 描述了透明度级别，其中： 0% 为完全透明。 100% (1) 是默认值，代表原始图像（不透明）。注释：不允许负值。提示：这个滤镜类似 opacity 属性。
saturate(%)	设置图像的饱和度。 0% (0) will make the image completely un-saturated. 100% is default and represents the original image. Values over 100% provides super-saturated results. 注释：不允许负值。
sepia(%)	将图像转换为棕褐色。 0% (0) 是默认值，代表原始图像。 100％将使图像完全变为棕褐色。注释：不允许负值。
url()	url() 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。实例： filter: url(svg-url#element-id)
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

Gjanuary

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css中filter的功能测试

<!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; ...
复制链接

扫一扫