css3父元素模糊不影响子元素

最新推荐文章于 2024-04-13 12:25:41 发布
最新推荐文章于 2024-04-13 12:25:41 发布
阅读量1.1w 收藏 8
点赞数 6
分类专栏： css3 filter 文章标签： css3 filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014520745/article/details/54585310
版权

说一下css3父元素模糊不影响子元素的效果。在使用css3的filter属性设置背景模糊的时候，我们通常想到的做法是写如下的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <style type="text/css">


        .test {  
            width:420px;
            height:420px;
            filter:blur(5px);
            background:url('http://www.zi-han.net.img.800cdn.com/theme/hplus/img/a3.jpg') no-repeat;
            background-size: cover;
        }


    </style>

</head>
<body>

<div style="width: 300px;height: 300px;position: relative;">
    <div class="test">   
      <img src="http://www.zi-han.net.img.800cdn.com/theme/hplus/img/a2.jpg">
    </div>
</div>

</body>

<script type="text/javascript" src="user.js"></script>
</html>

但是这样设置之后，页面的效果确实父元素和子元素都模糊了！

这里写图片描述

去网上了了些资料，很多都说改 z-index=-1 但是我加到 .test 缺没有效果，后面才知道其实这是通过伪类来实现的，上面代码中的css样式改成如下：

.test {  
    width:420px;
        height:420px;
}


.test::before{  
    content: "";
    position: absolute;

    filter:blur(5px);
    z-index: -1;
    background:url('http://www.zi-han.net.img.800cdn.com/theme/hplus/img/a3.jpg') no-repeat;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-size: cover;
    overflow:hidden;
}

这样效果就对了：

这里写图片描述

在这里还需要注意一个细节，为了边缘不被模糊化，需要设置 overflow:hidden; 要不效果就是这样了：

这里写图片描述

tyilack_小小黑
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css让容器背景有模糊效果,不影响容器内容
weixin_68658847的博客
01-13 707
css让容器背景有模糊效果,不影响容器内容
filter()实现模糊的三种方式
m0_37434992的博客
04-26 3668
filter:blur(2px) 是实现背景模糊的主要属性，下面来讲述filter实现三种效果的方法。 blur里的参数是设定高斯函数的标准差，或者说是屏幕上以多少像素融在一起，所以值越大，越模糊。 1 普通背景模糊 filter属性会使整个div的后代模糊并且还会出现白边，如果想让div里的子元素不模糊，，怎么办呢？可以使用伪元素，既解决了模糊问题，也解决了白边问题。 ...
解决父元素背景图片模糊处理影响子元素的问题
m0_46978096的博客
11-26 1156
当给父元素加背景图片且做模糊处理效果时子元素也会随之变模糊，如下 左上角白色区域就是子元素 代码如下 解决办法就是通过伪类before <template> <div class="login"> <div class="loginBox"> 不模糊了 </div> </div> </template> <script> export default{ name:'login' } </
父组件样式不影响子组件
ZZZZZZZZjy的博客
12-06 241
这段代码中的子组件`chartPie2`的`style="height: 100%;width: 100%"`属性将该组件的宽度和高度设置为100%。这意味着该组件将占据其父组件的整个可见区域，包括水平和垂直方向。需要注意的是，如果子组件的父组件也设置了宽度和高度为100%，那么子组件将占据整个页面的可见区域，而不仅仅是一个父组件。因此，在使用这种样式时，需要确保子组件的父组件不会影响子组件的可见性。通过设置宽度和高度为100%，子组件可以覆盖其父组件的内容，从而使父组件的其余部分不可见。
HTML与CSS3的学习笔记（14）父元素子元素，兄弟选择器，子元素选择器
最新发布
VAN
04-13 2323
元素之间的关系：父元素直接包含子元素的元素，子元素直接被父元素包含的元素， 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素 兄弟元素：拥有相同的父元素的元素叫做兄弟元素 后代元素选择器： 作用：选中指定元素的指定的后代的元素。 语法：祖先元素 后代元素{} 子元素选择器：作用：选中指定父元素的指定的子元素 语法：父元素&gt...
前端背景虚化效果（不影响子元素）
yangyanqin2545的博客
01-03 872
查看了好多资料，最后发现需要利用伪元素才可以实现该效果，由于项目中背景图片是随时变化，所以在这里使用了css变量去控制。在这里需要注意的一点是：利用var去调用变量的时候，不能使用驼峰式命名。在这里bgUrl可以随便定义，只是一个css引用的标识；
CSS高斯模糊，消除父元素对子元素的影响
qq_35821283的博客
12-03 3186
利用伪类实现背景高斯模糊，消除父元素对子元素的影响 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;title&gt;高斯模糊&lt;/title&gt;     &lt;style type="text/css"&gt;     html,     body {         width: 100%;         he
解决vue中父组件修改子组件样式的问题
wen_binobject的博客
06-24 4643
1 去掉 scoped 当 <style>标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。 但是在父组件中添加 scoped 之后，父组件的样式将不会渗透到子组件中，所以在父组件中书写子组件的样式是无效果的。 2 混用本地和全局样式 <style> /* 全局样式 */ </style> <style scoped> /* 本地...
css设置元素继承父元素宽度_css父元素不设置height，子元素高度百分比
weixin_35988038的博客
01-06 2149
如题，父元素设了minHeight maxHeight，都不管。不设height，子元素如果是文档流，，，height如果设置百分比，，，就很有意思了，子元素的高度就是自己内容称出来的，百分比无效！我是在用react写toast轮子组件那里，那里有个关闭的功能区，它跟内容区要有个边边a的，期望a是分割这两部分，然后高度充满toast。就这莫简单的。结果，我不给toast设置height，，，a就一...
css3基本语法.docx
07-05
nth-last-child(n), :first-of-type, :nth-of-type(n), :last-of-type): 这些选择器根据元素在兄弟元素中的位置进行选择，例如`:first-child`选择父元素的第一个子元素，`:nth-child(2n)`选择所有偶数位置的子元素等...
css入门笔记
05-15
6.em 相对父元素乘以倍数 7.rem 相对于根元素(html,body)乘以倍数 8.% 相对单位 2.颜色单位（取值） 1.颜色英文单词 blue,red,green,yellow.... 2.rgb（r,g,b） r:red; g:green; b:blue; r,g,b:0-255 ...
css 背景图片定位在菜单效果中的应用实例
09-25
接着，我们将主背景图片应用到这个菜单上，关键在于设置position属性为relative，这样可以使得子元素（如和）相对于父元素（）进行定位。 对于每个链接（），我们需要设置其宽高与按钮图形一致，并且将背景图片定位...
jQuery实现模糊查询的方法分析
10-18
`filter(":contains('"+queryStr+"')")`则筛选出包含用户输入关键字的这些子元素。最后，使用`.parent("li")`选择含有匹配子元素的父`<li>`元素，并将其显示。 需要注意的是，对于大量数据，这种逐个检查并更新DOM...
前端面试-css篇
09-03
继承是指子元素可以自动获得父元素的某些样式，如`font-family`、`font-size`、`color`、`list-style`等。不是所有属性都能继承，如`background-color`、`border`等是不可继承的。 3.6 CSS选择器： - 元素选择器：...
css实现背景模糊，但不影响背景上的内容
热门推荐
M_DREAMER的博客
03-12 2万+
        当我们插入背景图片时，又不影响内容的表达，我们可以让背景图片模糊。        下面介绍一下我所用到的方法。需要把背景图片和内容分别放在两个div里面方便我们管理，再对背景图片进行高斯模糊（filter属性）。下面看一下代码设置：html代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;met...
Day 275/300 css3 只对背景filter生效 而不对子元素生效
xinghuowuzhao的博客
06-21 248
【代码】Day 275/300 css3 只对背景filter生效 而不对子元素生效。
div图片背景虚化不影响图片上的文字_css 设置背景图片模糊，内容不模糊
weixin_35990183的博客
01-26 293
.content {color: #ffffff;font-size: 40px;}.bg {background: url('1.jpg');height:600px;text-align: center;line-height: 600px;}.bg-blur {float: left;width: 100%;background-repeat: no-repeat;background-po...
div图片背景虚化不影响图片上的文字_CSS3 使用图片框中的图片加上模糊效果作为背景图...
weixin_39696665的博客
12-19 201
CSS语言：CSSSCSS确定body {margin: 0;}.card {position: relative;border: 15px solid #000;box-shadow: inset 0px 0px 10px #000;}.card img {position: absolute;top: 50%;left: 50%;width: 50%;box-shadow: 2px 2px 5...
CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter
森姐姐的博客
11-14 1万+
CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filter、backdrop-filter
使父元素模糊，子元素不模糊
05-28
可以使用CSS的backdrop-filter属性来实现这个效果。将父元素设置为模糊，然后将子元素设置为不受影响。 例如，将父元素设置为模糊： ```css .parent { backdrop-filter: blur(5px); } ``` 然后将子元素设置为不受影响： ```css .child { backdrop-filter: none; } ``` 这样就可以实现父元素模糊，子元素不模糊的效果了。需要注意的是，backdrop-filter属性目前只有部分浏览器支持，需要进行兼容性处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值