当前位置：首页 > 培训机构 > css毛玻璃效果怎么做(css毛玻璃背景图片)

css毛玻璃效果怎么做(css毛玻璃背景图片)

作者：电脑培训网 2024-05-04 13:41:47 736

CSS可以轻松实现‘磨砂玻璃’效果

毛玻璃

1.background-filt属性2.filter属性3.background-filterfilter4.参考

1.backdrop-filt属性

css毛玻璃效果怎么做(css毛玻璃背景图片)

通过给元素添加background-filter:blur，这个CSS属性，该元素所在区域后面的元素，包括其后面的其他元素，都会被模糊或者颜色发生偏移。元素本身，包括里面的元素，不会有模糊的边框。

添加之前：

添加background-filter:Blur(3px);后：

注意：只有将元素或其背景颜色设置为透明时才能看到效果。

//CSS部分code.wrap.top{position:绝对；宽度：300px；高度：100px；边距：20px；border:1px实心#000；背景颜色：透明；background-filter:Blur(3px);//磨砂玻璃属性}

divclass='wrap'divclass='top'/div//因为类名为top的div框是绝对定位的，与文档流分离，且层级提升，所以div框的层级高于p段落的级别，//div框将覆盖p元素并位于p元素上方。p标签中的文本位于div框后面。在div框中添加background:blur(3px)后，文本将变得模糊。p祝愿你/pp像他这样的年轻人/p/div

2.filter属性

添加了滤镜属性的元素本身，包括内部元素和边框，都会出现模糊或色偏，并且不会导致该元素以外的其他元素模糊或色偏。

3.backdrop-filterfilter

background-filterfilter作用于对象元素后面的区域。该元素本身无效。对象元素本身或其他元素后面的区域。注意：最好为元素或背景设置透明颜色。查看效果/如图：给上面的黑边框框元素添加background-filter属性；元素内部的文字和黑色边框不模糊，后面的中英文和背景树模糊。

给下面红框的box元素添加filter属性；文本和元素内的红色边框是模糊的，但背景树没有模糊。

4.参考资料

MDN

相关推荐

  • 最新发布

热门推荐

猜你喜欢