CSS高斯模糊，消除父元素对子元素的影响

最新推荐文章于 2024-05-14 10:21:36 发布
最新推荐文章于 2024-05-14 10:21:36 发布
阅读量3.2k 收藏
点赞数 2
分类专栏： 前端 CSS 文章标签： 高斯模糊 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35821283/article/details/84771142
版权

利用伪类实现背景高斯模糊，消除父元素对子元素的影响

<!DOCTYPE html>
<html>

<head>
    <title>高斯模糊</title>
    <style type="text/css">
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #app {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    #app::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 167, 30, 0.4);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
        z-index: -1;
        /* 重要 */
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }

    #app img {
        width: 80%;
    }
    </style>
</head>

<body>
    <div id="app">
        <img src="https://tse4.mm.bing.net/th?id=OIP.MglsPcsUSOR9MRzvZrthUAHaEo&pid=Api&w=1920&h=1200&rs=1&p=0">
    </div>
</body>

</html>

茫然的旅行者
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS如何只改变父元素背景透明度不改变子元素透明度
09-25
在CSS中，当我们尝试...综上所述，如果你想在CSS中只改变父元素的背景透明度而不影响子元素，可以采用透明背景图片或者使用`rgba()`颜色值。这两种方法各有优缺点，选择哪种取决于具体的设计需求和浏览器兼容性要求。
解决父元素背景图片模糊处理影响子元素的问题
m0_46978096的博客
11-26 1174
当给父元素加背景图片且做模糊处理效果时子元素也会随之变模糊，如下 左上角白色区域就是子元素 代码如下 解决办法就是通过伪类before <template> <div class="login"> <div class="loginBox"> 不模糊了 </div> </div> </template> <script> export default{ name:'login' } </
css 使用blur，实现背景色高斯模糊，但不影响背景上的内容
蓝胖子的博客
04-06 2662
css 使用blur，实现背景色高斯模糊，但不影响背景上的内容
2024年最新【CSS】CSS入门笔记第二弹~_css 父元素(1)，【一篇文章搞懂】
最新发布
2401_84616027的博客
05-14 430
float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。选择器 { float: 属性值;属性值：none left right。
css3父元素模糊不影响子元素
小小黑
01-17 1万+
css3父元素模糊不影响子元素的效果 content: ""; position: absolute; filter:blur(5px); z-index: -1; background:url('http://w.products-test.zhuzhu.com/upload/img/album/59826/thumb/196d92dddf6
前端背景虚化效果（不影响子元素）
yangyanqin2545的博客
01-03 930
查看了好多资料，最后发现需要利用伪元素才可以实现该效果，由于项目中背景图片是随时变化，所以在这里使用了css变量去控制。在这里需要注意的一点是：利用var去调用变量的时候，不能使用驼峰式命名。在这里bgUrl可以随便定义，只是一个css引用的标识；
CSS：filter（滤镜）修饰父元素背景，影响子元素问题解决
九日的博客
04-30 7911
问题： 父元素作为背景，设置了filter的高斯模糊效果，影响到了子元素的文字↓↓↓↓↓↓↓↓↓↓ <div class="cell"> <p>嗷嗷嗷嗷嗷嗷嗷嗷啊</p> </div> /******************************/ <style> .cell{ width...
【CSS】565- 超好用的 CSS 阴影技巧
pingan8787
04-16 340
作者 | chokcoco来源 | https://juejin.im/post/5be1023951882516fd36a38e最近一个新的项目，CSS-Inspiration，挖掘了...
CSS子元素选择父元素的实现
11-19
通常一个CSS选择器都是从上往下选择的，通过父元素选择子元素，那么能不能通过子元素选择父元素呢？
CSS子元素跟父元素的高度一致的实现方法
11-19
在CSS布局中，确保子元素的高度与父元素保持一致是一个常见的需求，特别是在设计响应式页面或需要内容填充两侧布局时。本篇文章将详细介绍如何通过绝对定位的方法实现这一目标。 首先，我们要理解绝对定位...
css匹配选择属于其父元素的第N个子元素的方法
09-25
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。下面有个不错的示例，大家可以参考下
纯CSS让子元素突破父元素的宽度限制
11-19
"纯CSS让子元素突破父元素的宽度限制" 在CSS布局中，我们经常遇到子元素无法突破父元素的宽度限制的问题，这是因为在默认情况下，子元素的宽度是受限于父元素的宽度的。但是，有时候我们需要子元素突破父元素的宽度...
css 子元素覆盖父元素内边框阴影 解决办法
qq_40509733的博客
06-16 2164
父元素用添加伪类元素方法 添加一个阴影样式 定位到父元素上方 代码： .parent::after{ content:''; position:absolute; left:rem(0); right:rem(0); top:rem(0); bottom:rem(0); border-radius:8px...
CSS 滤镜filter教程
weixin_43466871的博客
12-03 484
CSS 滤镜 CSS样式表是一种为超文本标签语言提供增强补充服务的技术，可对每一个html的标签做精雕细刻的修饰。 只用html制作的网页，对页面内各部分的修饰能力有限且语句烦锁，样式表正是弥补这一缺陷的有力技术，它语句文法简单，只要在源码中插入style语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能，使网页更加生动活泼，从而获得满意的效果。当然，样式表的强大还依靠的...
CSS 高斯模糊[毛玻璃]效果 blur对子级的影响
qq_42780885的博客
04-01 828
效果图 这里是制作了 弹出菜单 需要模糊后面的元素 这里选择使用filter: blur 我们给需要模糊的对象 加上filter: blur .box{ height: 100vh; width: 100vw; background-size: cover; filter: blur(1px); background-image: url(1.jpg); backgroun...
【display:flex】弹性布局，父元素设置display:flex后子元素的宽度太大撑大了父元素的宽度
热门推荐
weichun
03-20 2万+
最近做一个现货平台的项目，需要展示的数据超多，不是table就是chart，布局需要弹性自适应，所以使用了css3的flex布局方案。 先看下界面： 就上边界面来说，主要分左右两大部分，各部主体都是table，用的是ant-design的table插件。主要需求是页面布局要弹性，右边表格的中间部分（如果所示，其中的“1月可买卖”，“2月可买卖”，......“11月可买卖”，“12月可买卖”）...
Flex 布局
laoyutoucc的博客
04-28 862
弹性盒 1、要使用弹性盒布局，要先在容器上定义display：flex；告诉浏览器这是弹性盒布局 2、弹性盒比较形式，默认让子元素横向排列（row） 3、在弹性盒中，外面的父元素称为容器，里面的子元素称为项目（子项目） 4、弹性盒的目的：让容器有能力去控制项目----改变他的宽度，子元素的顺序，位置等 5、每一种布局的出现就是为了解决一个问题 float 、position 、 6、在弹性盒布局中，有轴的概念----主轴（水平方向—x）----侧轴（垂直方向—y） 7、弹性盒内的弹性项目不分块级元素跟行内元
CSS通过blur实现高斯模糊
胖蔡叨叨叨
12-09 2032
通常的，CSS中我们可以通过blur(radius)函数实现高斯模糊，blur函数也是CSS中滤镜函数使用频率较高的一个，通过高斯模糊设置可以让我们的输出图像具有更好的呈现。
CSS3某个样式如何取消掉
张木期的博客
07-22 2906
首先描述问题： 我遇到ant design vue 中的table组件里的filter的位置问题，需求是要靠近表头，而默认是右对齐，所以经过查完之后 要取消这个right:0这个属性。如何操作呢？ 写一个新的right 肯定是可以覆盖的，但是我们不需要 写新的覆盖，只需要取消right：0这个属性就好 经过查询：直接使用 right:initial 就可以了 不起作用的话试试加个!important right:initial !important 解决如下： ...
css 高斯模糊
05-30
要实现 CSS 高斯模糊效果，可以使用 CSS 的 `filter` 属性和 `blur()` 函数。具体做法如下： 1. 在需要应用高斯模糊的元素上添加 `filter` 属性，并设置其值为 `blur()` 函数，如下所示： ```css .element { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值