css设置背景模糊

最新推荐文章于 2024-04-28 23:16:47 发布
最新推荐文章于 2024-04-28 23:16:47 发布
阅读量150 收藏
点赞数
原文链接：http://www.cnblogs.com/qianxuebing/p/9830528.html
版权

使用filter属性来设置模糊值

效果：

 

css样式：

 

<style type="text/css">
        .cover {
            width: 600px;
            height: 300px;
            position: relative;
            text-align: center;
            line-height: 300px;
            color: #fff;
            margin: 20px auto;
        }
        
        .cover::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 600px;
            height: 300px;
            background: transparent url(Images/picture/5.jpg) center center no-repeat;
            filter: blur(8px);
            z-index: -1;
            background-size: cover;
        }
    </style>

 

HTML结构：

<body>
    <div class="cover">
        <h2>背景模糊，文字清晰显示</h2>
    </div>
</body>

　　

 

转载于:https://www.cnblogs.com/qianxuebing/p/9830528.html

denghous8817
关注
CSS设置背景模糊的实现方法
09-22
在CSS中，设置背景模糊是一种常见的视觉效果，用于创造一种柔和或者艺术性的视觉体验。本文将详细介绍如何通过CSS实现背景模糊，并提供一个解决方案，避免模糊效果影响到主要内容。 首先，CSS的`filter`属性是实现...
css背景图铺满后图片变模糊的解决办法
qq_40649432的博客
04-22 2613
直接上代码 background-image: url('@/assets/xk.png'); width:70px; height: 25px; background-size:100% 100%;//宽度铺满 image-rendering: -webkit-optimize-contrast;//处理模糊的代码
CSS背景图片高斯模糊效果
Y00010010的博客
03-19 2976
CSS实现背景图片模糊效果
css实现背景模糊效果
YoungMan_09的博客
04-06 1万+
css背景模糊效果 方法：background-color +backdrop-filter 来配合实现
用css写背景模糊的三种情况
weixin_73529240的博客
11-02 1万+
今天一下午什么都没干，只搞了这个模糊效果和动画还有一个发光按钮的效果，不过当真正攻克难关的时候还是感觉很开心的，一定一定要把基础知识掌握牢固（比如overflow和after的两个引号），其实最难的往往还是最基础的知识，因为东西就这么多，就摆在这里，再多的花样也逃不出这些基础知识的范围，花活谁都会整，有基本才是硬道理。关关难过关关过，前路漫漫亦灿灿嘛。
CSS设置背景图片模糊内容不模糊的解决方法
09-27
本文将详细讲解如何通过CSS设置背景图片模糊，而内容保持不模糊。 首先，我们要理解CSS的`filter`属性。`filter`属性允许我们应用各种视觉效果到元素上，如模糊、灰度、饱和度调整等。在我们的场景中，需要用到的是...
CSS模糊背景效果代码
01-23
例如，如果我们想将一个元素的背景模糊5像素，我们可以这样写： ```css element { background: url('your-image.jpg'); filter: blur(5px); } ``` 在这里，`element`是你想要应用模糊效果的元素，`your-image....
CSS3背景模糊霓虹灯特效
06-24
在本文中，我们将深入探讨如何使用CSS3来创建一个引人注目的背景模糊霓虹灯特效，这是一种利用粒子模糊和随机显示动画的技术，为网页增添动态感和视觉吸引力。CSS3，即层叠样式表第三版，是Web设计中用于控制网页...
CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter
森姐姐的博客
11-14 1万+
CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter
【前端学习——css】css实现给背景的图片加模糊
最新发布
Everglowwwwww的博客
04-28 1256
我在制作自己的博客的时候，打算做个封面，封面用半透明颜色盖住了预览图，上面印上了文字，但背景图太乱了，所以打算给背景加模糊效果。
如何用CSS制作模糊背景效果
邓占勇的博客
09-18 3061
HTML部分 要为header部分设置一个模糊的背景图片作为背景，HTML部分如下，把内容部分与背景部分都作为header的一级子元素 &lt;div class="header"&gt; &lt;div class="text"&gt; 这里写要显示的内容 &lt;/div&gt; &lt;div class="background"&g
CSS实现背景模糊/毛玻璃效果
erzhushashade的博客
12-19 3万+
所有代码地址：filter 文末也有代码 方法一 效果 原理 如果只单纯的想实现背景模糊效果，而背景之上没有其他内容，那么就使用filter（滤镜）就足以，其中包括模糊，亮度，灰度，阴影等等：参考 MDN filter 相关内容。如果在其中上面还有文字，也同样会出现模糊。用下面的方法可以解决 方法二 效果 原理 这里就是使用伪元素（before，after），也是我在网上搜到的大多教程的方法，确实是成功了，但是项目编译后该图片的路径确不正确导致无法使用，这里始终没有找到原因。但是小伙伴不失可以试试
css实现模糊背景
weixin_51290033的博客
01-10 717
在父容器中设置背景，并且使用相对定位，方便伪元素重叠。而在:after中只需要继承背景，并且设置模糊，绝对定位覆盖父元素即可。这样父容器中的子元素便可不受模糊度影响。因为伪元素的模糊度不能被父元素的子代继承。说了这么多，来点代码提提神。
CSS3实现模糊背景的三种效果
热门推荐
CSU_Zipple的博客
10-31 13万+
不开头了，直接进入主题。 普通背景模糊效果如下： 使用属性：filter:(2px)普通背景模糊为了美观不能使背景前的文字模糊，而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢？我们可以使用伪元素，这样我们也顺便解决了白边的问题。实现思路： 在父容器中设置背景，并且使用相对定位，方便伪元素重叠。而在:after中只需要继承背景，并且设置模糊，绝对定位
css设置模糊背景
weixin_44011751的博客
07-20 485
在设置背景的类样式中设置filter: blur(模糊值),如:filter: blur(5px) /* 模糊背景图片 */ #workShow .imgItem { width: 100%; height: 270px; position: relative; /* border-bottom: 1px solid red; */ } #workShow .imgItem::before { width: 100%; height: 270px; filter: blur(5px); content: "
css 设置背景图片模糊，内容不模糊，怎么用css设置背景模糊
木木何兴林的技术博客
07-24 9663
需求：一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。 解决方法：内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置，实质上是在底层加了一个div,给这个div设置模糊了。
css 设置背景图片模糊，内容不模糊
马优晨
07-01 2万+
方案： 内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .content { ...
css 设置背景图片模糊效果
凌风的博客
07-17 2万+
效果： html: &lt;div class="head_channel"&gt; &lt;div class="head_box"&gt; //这里是内容区域 &lt;/div&gt; &lt;div class="blur_bj"&gt; &lt;img src="https://
CSS3 设置模糊背景图片
俊刚的博客
11-08 2万+
使用方法： -webkit-filter: blur(5px); /* Chrome, Safari, Opera */     filter: blur(5px); blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值