标签：100% 0% 值为 filter 滤镜 设置 图像 css
<!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>
</head>
<style>
img {
/* blur() 函数将高斯模糊应用于输入图像。radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为0。该参数可以指定为 CSS 长度，但不接受百分比值。*/
filter: blur(5px);
/* 将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为 0％ 将创建全黑图像值为 100％ 会使输入保持不变。其他值是效果的线性乘数。如果值大于 100% 提供更明亮的结果。若没有设置值，默认为 1。 */
filter: brightness(0.4);
/* 调整输入图像的对比度。值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1。*/
filter: contrast(200%);
/* 对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。 函数接受<shadow>（在CSS3背景中定义）类型的值，除了 inset 和 spread 关键字 */
filter: drop-shadow(16px 16px 20px blue);
/* 将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。 */
filter: grayscale(50%);
/* 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。 */
filter: hue-rotate(90deg);
/* 反转输入图像。amount 的值定义转换的比例。100% 的价值是完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。 若值未设置值，默认为 0。 */
filter: invert(75%);
/* 转化图像的透明程度。amount 的值定义转换的比例。值为 0% 则是完全透明，值为 100% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速。 */
filter: opacity(25%);
/* 转换图像饱和度。amount 的值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。 若未设置值，默认为 1。 */
filter: saturate(30%);
/* 将图像转换为深褐色。amount 的值定义转换的比例。值为 100% 则完全是深褐色的，值为 0% 图像无变化。值在 0% 到 100% 之间，值是效果的线性乘数。若未设置，值默认是 0。 */
filter: sepia(60%);
/* 复合函数。同事使用多个滤镜 */
filter: contrast(175%) brightness(3%);
/* 不使用滤镜 */
filter: none;
}
.container {
margin: 50px auto;
height: 140px;
width: 400px;
/* 给融合元素的父元素设置背景色 */
background: #fff;
display: flex;
align-items: center;
justify-content: center;
/* 给融合元素的父元素设置contrast */
filter: contrast(30);
}
.circle {
border-radius: 50%;
position: absolute;
/* 给融合元素设置blur */
filter: blur(15px);
}
.circle-1 {
height: 90px;
width: 90px;
background: #03a9f4;
transform: translate(-50px);
animation: 2s moving linear infinite alternate-reverse;
}
.circle-2 {
height: 60px;
width: 60px;
background: #15ff00;
transform: translate(50px);
animation: 2s moving linear infinite alternate;
}
@keyframes moving {
/* //两个元素的移动 */
0% {
transform: translate(50px)
}
100% {
transform: translate(-50px)
}
}
</style>
<body>
<div class="container">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>
<!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190214%2Fed33981873a044638a8bd45ed24bfe32.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634967244&t=eb2d4e2c09282313b334a7c68587afbb"
alt=""> -->
</body>
</html>
<!-- * @Description: * @Version: 1.0 * @author: shihaixia * @Date: 2021-09-23 13:30:48 --> <!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> </head> <style> img { /* blur() 函数将高斯模糊应用于输入图像。radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为0。该参数可以指定为 CSS 长度，但不接受百分比值。*/ filter: blur(5px); /* 将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为 0％ 将创建全黑图像值为 100％ 会使输入保持不变。其他值是效果的线性乘数。如果值大于 100% 提供更明亮的结果。若没有设置值，默认为 1。 */ filter: brightness(0.4); /* 调整输入图像的对比度。值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1。*/ filter: contrast(200%); /* 对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。 函数接受<shadow>（在CSS3背景中定义）类型的值，除了 inset 和 spread 关键字 */ filter: drop-shadow(16px 16px 20px blue); /* 将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。 */ filter: grayscale(50%); /* 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。 */ filter: hue-rotate(90deg); /* 反转输入图像。amount 的值定义转换的比例。100% 的价值是完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。 若值未设置值，默认为 0。 */ filter: invert(75%); /* 转化图像的透明程度。amount 的值定义转换的比例。值为 0% 则是完全透明，值为 100% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的 opacity 属性很相似，不同之处在于通过 filter，一些浏览器为了提升性能会提供硬件加速。 */ filter: opacity(25%); /* 转换图像饱和度。amount 的值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。 若未设置值，默认为 1。 */ filter: saturate(30%); /* 将图像转换为深褐色。amount 的值定义转换的比例。值为 100% 则完全是深褐色的，值为 0% 图像无变化。值在 0% 到 100% 之间，值是效果的线性乘数。若未设置，值默认是 0。 */ filter: sepia(60%);
/* 复合函数。同事使用多个滤镜 */ filter: contrast(175%) brightness(3%); /* 不使用滤镜 */ filter: none; }
.container { margin: 50px auto; height: 140px; width: 400px; /* 给融合元素的父元素设置背景色 */ background: #fff; display: flex; align-items: center; justify-content: center; /* 给融合元素的父元素设置contrast */ filter: contrast(30); }
.circle { border-radius: 50%; position: absolute; /* 给融合元素设置blur */ filter: blur(15px); }
.circle-1 { height: 90px; width: 90px; background: #03a9f4; transform: translate(-50px); animation: 2s moving linear infinite alternate-reverse; }
.circle-2 { height: 60px; width: 60px; background: #15ff00; transform: translate(50px); animation: 2s moving linear infinite alternate; }
@keyframes moving {
/* //两个元素的移动 */ 0% { transform: translate(50px) }
100% { transform: translate(-50px) } } </style>
<body> <div class="container"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> </div> <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190214%2Fed33981873a044638a8bd45ed24bfe32.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634967244&t=eb2d4e2c09282313b334a7c68587afbb" alt=""> --> </body>
</html>
标签：100%,0%,值为,filter,滤镜,设置,图像,css 来源： https://www.cnblogs.com/cupid10/p/15323857.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。