css如何给图片加滤镜效果?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
在CSS中,可以使用filter属性来给图片加滤镜效果。
使用CSS filter属性,可以将类似Photoshop的滤镜效果应用于图像和内容;滤镜效果包括例如模糊效果,阴影,色彩变换和操作,如饱和/去饱和色等。
filter属性定义了元素(通常是)的可视效果,此属性主要用于图像内容。
下面给大家介绍一下:
我们用的第一个滤镜是sepia(),他会给图片增加一整降饱和度的橙色染色效果
原图
添加sepia滤镜的效果img{
width:100%;
transition: .5s filter;
filter:sepia(2);
}
img:hover{
filter:none;
}
给色度添加饱和度可以用saturate()filter: saturate(4);
两个同时添加的效果filter:sepia(2) saturate(4);
如果不希望把图片调成橙黄色调也可以添加hue-rotate滤镜,变成稍深的亮粉色,大约295度filter:sepia(1) saturate(4) hue-rotate(295deg);
还有一种毛玻璃的效果如下
html
An international forum for the world's major
bay areas launched a new cooperation platform over
the weekend to exchange resources and development
ideas, with bay areas in China and the United States
also standing to benefit.
css.box {
margin: 0 auto;
width: 500px;
height: 300px;
color: #fff;
background: url('../assets/pic.jpg') 0 / cover;
display: flex;
justify-content: center;
align-items: center;
}
.p{
position:relative;
padding: 15px;
background:hsla(0 ,0% ,100%,.3);
width: 350px;
font-size:1.2em;
overflow:hidden;
z-index: 1;
}
.p::before{
content:'';
z-index:-1;
position:absolute;
top:0;left:0;right:0;bottom:0;
filter:blur(20px);
margin:-10px;
background: url('../assets/pic.jpg') 0 / cover;
}
效果图
更多web前端开发知识,请查阅 HTML中文网 !!