且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何将 CSS 过滤器应用于背景图像

更新时间:2023-01-26 17:24:22

看看这个 pen.

您将不得不使用两个不同的容器,一个用于背景图像,另一个用于您的内容.

在示例中,我创建了两个容器,.background-image.content.

两者都以position:fixedleft:0放置;右:0;.显示它们的差异来自 z-index 为元素设置的不同值.

.background-image {位置:固定;左:0;右:0;z-索引:1;显示:块;背景图片:url('https://i.imgur.com/lL6tQfy.png');宽度:1200px;高度:800px;-webkit-过滤器:模糊(5px);-moz-过滤器:模糊(5px);-o-过滤器:模糊(5px);-ms-filter:模糊(5px);过滤器:模糊(5px);}.内容 {位置:固定;左:0;右:0;z-索引:9999;左边距:20px;右边距:20px;}

<div class="background-image"></div><div class="内容"><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit.Duis aliquam erat in antemalesuada, facilisis semper nulla semper.Phasellus sapien neque、faucibus inmalesuada quis、lacinia et libero.sed sed turpistellus.Etiam ac aliquam tortor, eleifend犀牛.Ut turpis massa,sollicitudin 坐 amet moestie a,posuere 坐 amet nisl.Mauris tincidunt cursus posuere.Nam commodo libero quis lacus sodales, nec feugiat ante posuere.Donec pulvinar 拍卖会.Donec egestas diam ut mi adipiscing,quis lacinia mauris 调味品.Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum.Etiam 在 nisl eu felis vulputate porta. </p><p>Fusce ut placerat eros.Aliquam consequat in augue sed convallis.Donec orci urna,tincidunt vel dui at,elementum semper dolor.Donec tincidunt risus sed magna dictum, quis luctus metus volutpat.Donec accumsan et nunc vulputate accumsan.前庭时间,在 mattis fringilla 的时代,elit urna ornare nunc,vel pretium elit sem quis orci.Vivamus condimentum dictum tempor.Nam at est ante.Sed lobortis et lorem in sagittis.在 est et vehicula 中 </p>