css3实现毛玻璃效果

backdrop-filter属性允许我们对元素后面的内容进行过滤，完整代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">.image {position: relative;width: 40%;}.image__img {display: block;width: 100%;height: 100%;background-size: cover;}.image__overlay {position: absolute;top: 10%;left: 10%;width: 80%;height: 80%;border-radius: 10px;color: #ffffff;display: flex;flex-direction: column;align-items: center;justify-content: center;}.image__overlay--blur {backdrop-filter: blur(10px);}</style></head><body><div class="image"><img class="image__img" src="./img/lemon.jpg" alt="lemon"><div class="image__overlay image__overlay--blur"><div>Lemon</div></div></div></body>
</html>

滤镜	释义
blur	模糊
brightness	亮度
contrast	对比度
drop-shadow	投影
grayscale	灰度
hue-rotate	色调变化
invert	反相
opacity	透明度
saturate	饱和度
sepia	褐色

补充：添加鼠标悬停显示毛玻璃，通过transition过渡实现，修改 image__overlay类样式并添加image__overlay:hover样式，代码如下：

.image__overlay {position: absolute;top: 10%;left: 10%;width: 80%;height: 80%;border-radius: 10px;color: #ffffff;display: flex;flex-direction: column;align-items: center;justify-content: center;transition: opacity 0.5s;opacity: 0;
}.image__overlay:hover {opacity: 1;
}

css3实现毛玻璃效果相关推荐

php 毛玻璃,CSS3实现毛玻璃（图片模糊）效果
摘要:CSS3实现毛玻璃(图片模糊)效果.. **首先看效果** **引入下题** HTML: CSS3:#blur{ filter:blur(10px); -webkit-filter:blur(1 ...
css3 仿aero,让Qt支持Win7的Aero和毛玻璃效果
Qt5增加了许多特性,其中 Qt Windows Extras 模块就增加了对Win7 Aero 效果的支持. 官网的介绍如下: Qt Windows Extras provide classes a ...
css3毛玻璃效果白边问题
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...
Css3实现背景毛玻璃效果
毛玻璃效果 ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法 css3 Filter css3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项: 1.gr ...
毛玻璃效果 php,CSS3教程之制作倾斜导航条和毛玻璃效果
这篇文章主要介绍了使用CSS3制作倾斜导航条和毛玻璃效果,需要的朋友可以参考下导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相 ...
css filter blur 白边,如何解决CSS3毛玻璃效果blur有白边的问题
如何解决CSS3毛玻璃效果blur有白边的问题发布时间:2021-06-29 11:59:54 来源:亿速云阅读:81 作者:小新这篇文章给大家分享的是有关如何解决CSS3毛玻璃效果blur有白 ...
使用CSS3制作倾斜导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
css filter blur 白边,解决css3毛玻璃效果(blur)有白边问题
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
H5+CSS3 背景图毛玻璃效果实现方案
方案一.<img> + filter: blur() <div class="container"><img class="backgrou ...

css3实现毛玻璃效果

css3实现毛玻璃效果相关推荐

最新文章

热门文章