81-(CSS3)滤镜

于 2023-04-08 23:41:36 发布
阅读量61 收藏
点赞数
分类专栏： 03_CSS 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q506174602/article/details/130036489
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滤镜</title>
	<style>
		div {
			width: 300px;
			height: 200px;
			/*overflow: hidden;*/
			margin: 100px auto;
		}

		div img {
			width: 100%;
			height: 100%;
			transition: all 1s;

			/* 给图片设置 高斯模糊, 值越大越模糊 */
			/*filter: blur(3px);*/

			/* 给图片设置明亮成都 , 0%是黑色,  100%是原始样子 */
			/*filter: brightness(0.7);*/

			/*对比度: 阴影最亮 与 最暗之间的中间值叫做对比度, 0%是灰色*/
			/*filter: contrast(10%);*/

			/*灰度图像, 100% 是黑白的, 0%是原彩*/
			filter: grayscale(100%);

			/*饱和度  颜色深一点*/
			/*filter: saturate(100%);*/

			/*阴影 盒子的阴影有6个值, 这个只有4个(看官网教程) */
			/*filter: drop-shadow(5px 5px 50px red);*/

			/* 透明度 0%-100% */
			/*filter: opacity(100%);*/

			/* 翻转输入图片， 和相机底片差不多 */
			/*filter: invert(100%);*/

			/* 给图片添加其他颜色， 多种颜色变化 0deg-360deg */
			/*filter: hue-rotate(2deg);*/
		}
		div img:hover {
			filter: grayscale(0%);
		}
	</style>
</head>
<body>
	<div>
		<img src="images/ddz.jpeg" alt="">
	</div>
</body>
</html>

 上述运行结果：

 

 

七色的天空
关注
专栏目录
临摹中国慕课静态网页第二周周记（CSS3+JS）
weixin_53363646的博客
03-28 1428
临摹中国慕课静态网页第二周周记（CSS3+JS） 第二周 这周主要是对细节，轮播图，下拉菜单等地完善和JS的学习 学习内容 （1）CSS word-break 属性 属性规定自动换行的处理方法。 语法： word-break: normal|break-all|keep-all; 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 （2）伪元素 之前都没有系统的把伪元素学习一遍，因为最多用
CSS总结
qq_33495944的博客
04-03 438
CSS总结 css选择器种类有： 通用选择器：* id选择器：#header{} class选择器：.header{} 元素选择器：div{} 子选择器：ul > li{} 后代选择器：div p{} 伪类选择器： :hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:n...
css3滤镜-色彩（Chroma）滤镜
xyy_933的博客
05-03 595
chroma滤镜         div{         /*-webkit-filter:Chroma(color=blue);*/         filter:Chroma(color=blue);         }         p{         font-size:30px;         font-weight:bolder;         color
css3滤镜
honey_seve7n的博客
10-13 317
css3提供了fiter属性，可以对图片做特效处理，如模糊，亮度，对比度等 常用写法： -webkit-filter:blur(1px) /*兼容Chrome, Safari, Opera */ filter:blur(1px) 常用的效果有： blur（px） 高斯模糊 brightness(%) 亮度（0-100%） contrast(%) 对比度  drop-shadow(水...
CSS3滤镜
DGL_CSDN的博客
08-31 317
1 滤镜 之前我们要处理一张图片的取色，模糊，褐色等效果必须使用 Photoshop 处理完后保存多张图片，而 CSS3 滤镜的出现使我们在网站中想要轻松实现这些效果变得可能。只需要通过 filter 滤镜的各种属性就能轻松实现，如：grayscale(灰色)、sepia(褐色)、saturate(饱和度)、blur(模糊)…等 1.1 定义和使用 filter 属性定义了元素(通常是 img)的可视效果(例如：模糊与饱和度)。 filter 滤镜，借鉴了 Photoshop 的滤镜效果，在 p
Python OpenCV笔记
SlowFeather's blog
02-05 504
Python OpenCV笔记OpenCV下载引入库载入图像保存图像获取图像信息图像尺寸第一种第二种图像大小图像处理颜色空间转换改变图像质量缩小图像按照一定比例缩放图片给图片添加黑边裁剪图片将图像转换为HSV OpenCV下载 pip3 install opencv-python 引入库 import cv2 载入图像 普通读取图像 # 载入图像 im即所谓的CVMat img = cv2....
css3中的滤镜特效
x先生的博客
11-23 1375
页面被渲染后再页面中某个局部呈现的一些特殊的视觉效果。 先放一张原图： grayscale滤镜（灰度滤镜） <style> .grayscale { filter: grayscale(50%); -webkit-filter: grayscale(50%); } </style> <h3>grayscale（灰度滤镜）：</h3> <div cla
css总结
love_dzq的博客
05-20 2206
对CSS2以及CSS3和移动端布局方式做了个总结
html+css+js基础问答
qq_43751465的博客
08-26 5278
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
翻出过去的一个多彩泡泡屏保特效(JS+CSS版)
u010227447的专栏
05-13 4269
整理文件时翻出一个好久前做的泡泡屏保的特效，纯JS+CSS做的。回想了下，是去年年初时看见XP下那个流行的泡泡屏保，突然想移植到JS版本来。但有做着才发现有不少麻烦的问题解决不好，于是没继续。 　　  　　DEMO： http://www.etherdream.com/funnyscript/bubbles/    　　 　　和XP系统自带的那个屏保一样，从屏幕一个角落里冒
总结css3的十大滤镜
oilpastell的博客
05-26 234
1、模糊滤镜（px） 给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊。 filter:blur(4px); 2、亮度（%） 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 filter: brightness(200%); 3、对比度（%） 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的
css的filter全属性图文介绍
最新发布
博客of me
01-09 1684
css的filter共有10种属性，分别为：模糊（blur），亮度(brightness)，对比度(contrast)，阴影(drop-shadow)，灰度(grayscale)，色调旋转(hue-rotate)，反色(invert)，透明度(opacity)，饱和度(saturate)和褐度(sepia)。
图片使用css3滤镜改变图片颜色
qq_38181746的博客
07-14 1789
使用css改变图片背景颜色
CSS3 强大的Filter详解（改变模糊度 亮度 透明度等方法）
c_qianxia5040的博客
12-15 4395
1.模糊 blur 值为length filter: blur(9px); 2.灰度 grayscale 值为0-1之间的小数 filter: grayscale(1); 3.亮度 brightness 值为0-1之间的小数 filter: brightness(2.3); 4.对比度 contrast 值为num filter: contrast(4.4); 5.饱和度 saturate 值为num filter: saturate(3.6); 6.色相旋转 hue-rota
关于 CSS3 中的 filter(滤镜) 属性
daoxiaofei的博客
10-11 952
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 CSS语法： filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() 提示：若想在一个元素上应用多个滤镜，可用空格分隔 filter函数： 注意: 滤镜通常使用百分比 (如：
css 统计,纯Css 3d统计图
weixin_39546312的博客
08-04 319
cssbody {overflow: hidden;margin: 0;height: 100vh;perspective: 65em;perspective-origin: 50% calc(50% - 24em);background: #000;}div {position: absolute;top: 50%;left: 50%;transform-style: preserve-3d;}...
css3滤镜使img小图标变色
weixin_42959469的博客
08-13 5074
img小图标变色 之前在做项目时遇到过鼠标悬浮时图标变色的需求，因为用到的是图片不能直接改变颜色。这里就分享一个通过css3的滤镜达到变色的效果。 html代码 &lt;div&gt; &lt;img src="images/wei.png" alt=""&gt; &lt;/div&gt; css代码 div{ width:20px; height:20px; ...
CSS3 filter(滤镜) 属性修改图片颜色
qq_35018214的博客
01-03 3646
通过演示修改图片颜色 HTML <div> <img src="http://file02.16sucai.com/d/file/2014/0704/e53c868ee9e8e7b28c424b56afe2066d.jpg"> <img class="gray" src="http://file02.16sucai.com/d/file/2014/07...
通过css3的filter滤镜改变png图片的颜色
Rey
07-04 4473
本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影，然后将原始图片隐藏起来，从而达到改变图片颜色的目的 先看效果图 接下来是代码 <p><strong>原始图标</strong></p> <i class="icon icon-del"></i> <p&gt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

七色的天空

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值