开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS模糊整个部分，不模糊div内部

CSS模糊效果可以通过filter属性来实现。要实现模糊整个部分而不模糊div内部，可以使用CSS的backdrop-filter属性。

backdrop-filter属性可以在元素的背景和内容之间创建一个视觉效果，可以用于模糊、饱和度、亮度等效果。但需要注意的是，backdrop-filter属性目前只有部分浏览器支持，如Chrome、Safari等。

下面是一个示例代码，演示如何模糊整个部分而不模糊div内部：

<!DOCTYPE html>
<html>
<head>
  <style>
    .blur-container {
      width: 400px;
      height: 300px;
      background-image: url('background.jpg');
      backdrop-filter: blur(10px);
      border: 1px solid black;
    }
    
    .content {
      width: 200px;
      height: 150px;
      background-color: white;
      margin: 50px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="blur-container">
    <div class="content">
      <h1>这是一个div内部的内容</h1>
      <p>这是一些文本内容</p>
    </div>
  </div>
</body>
</html>

在上面的示例中，.blur-container类定义了一个具有模糊效果的容器，使用了backdrop-filter: blur(10px);来实现模糊效果。.content类定义了一个内部的div，它的内容不会被模糊。

需要注意的是，backdrop-filter属性的兼容性较差，不同浏览器的支持情况可能不同。在实际开发中，建议先检查浏览器的兼容性，如果需要更好的兼容性，可以考虑使用其他技术或库来实现模糊效果，如使用JavaScript或使用第三方库。

相关搜索:CSS -模糊div中的模糊div问题下面所有div上的css模糊效果不裁剪容器内的CSS模糊滤镜为什么内部块css转换会影响父文本模糊更长时间？为什么在CSS中旋转div的边框周围会有一个模糊的边框？在div旁边，CSS背景变得模糊模糊除div之外的整个页面导致无法识别的选择器发送到实例的UIButton 将布尔返回到AJAX请求未捕获错误:模板解析错误："let-“仅在ng-template元素上受支持。

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS实现页面背景图片模糊内容不模糊的方法

Document <style type="text/<em>css</em>...text-shadow: 0 2px 20px rgba(0, 0, 0, .1); } <em>不</em><em>模糊</em>的内容

2.5K2 0

CSS设置背景图片模糊内容不模糊的解决方法

需求：一个div设置了background: url，现在需要使图片背景模糊，div内的文字清晰显示。...解决方法：内容和图片分别置于一个div，通过css设置背景div模糊度，设置内容div绝对位置，实质上是在底层加了一个div,给这个div设置模糊了。... 这里面是清晰的内容 .banner_bg{ width:100%

2.5K3 0

现代 CSS 解决方案：数学函数 Round

在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如在现代 CSS 解决方案：CSS 数学函数一文中，我们详细介绍了 calc()：用于计算任意长度、百分比或数值型数据...解决基于 transform 的模糊问题在之前的疑难杂症：运用 transform 导致文本模糊的现象探究这篇文章中，我们介绍了一种基于transform 的模糊问题。...50%; transform: translateY(-50%); // ... } 由于元素的高度为 475px，translateY(-50%) 等于 237.5px，非整数，才导致了内部的字体模糊...但是，需要注意的是，并非所有产生的非整数都会导致了内部的字体模糊。...transform; console.log("transform:", transform); }); 如果使用 transform: translate(-50%, -50%) resize 整个页面

2952 0

【CSS】367- 用 CSS3 制作导航条和毛玻璃效果

简单的说，毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理。这种效果对用户来说是十分具有视觉冲击力的。本次分享的主题：通过CSS3来制作类似下面的导航条和毛玻璃效果。导航条是梯形形状的。...skewX(-25deg); transform: skewX(-25deg); } .keith li:hover::after { background: #2586D7; } 上面代码中，只显示了部分重要部分...原因在于我们需要让伪元素相对与 li 元素定位，并且让伪元素填满整个 li 元素的空间，这样的话给伪元素设置的背景就会铺满整个 li 元素。...可以看到，毛玻璃中的blur()效果有点过犹不及了，一圈模糊效果超出了容器，给父元素设置overflow:hidden，可以将超出的部分剪切掉。最终的示例效果如下。最终效果看起来就很自然了。...3.结束语三个实例中，有一个共同的思想：将CSS3的倾斜，透视，旋转和滤镜效果都放在伪元素中，并且给父元素设置relative，伪元素设置absolute，让伪元素的宽度和高度撑满父元素的整个区域，最后设置伪元素的

1.7K1 0

CSS 奇思妙想 | 全兼容的毛玻璃效果

通过本文，你能了解到最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果在至今不兼容 backdrop-filter 的 firefox 浏览器，如何利用一些技巧性的操作...，巧妙的同样实现毛玻璃效果，让这个效果真正能运用在业务当中什么是 backdrop-filter backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）...因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。...简而言之，它能够复制一个元素内部渲染出来的 UI，并且能够实时同步变化。...则是不兼容 backdrop-filter 时，我们需要模拟整个 DOM 背景 UI时候的元素，可以通过 CSS 特性检测 CSS @support 进行控制：核心 CSS 代码： .bg {

2K2 0

神奇的滤镜！巧妙实现内凹的平滑圆角

背景某日，群友们在群里抛出这样一个问题，如何使用 CSS 实现如下的布局：在 CSS 世界中，如果只是下述这种效果，还是非常容易实现的：一旦涉及到圆角或者波浪效果，难度就会提升很多。...首先，我们会实现一个内部挖出一个矩形的矩形：核心 CSS 代码如下： div { height: 200px; background: linear-gradient...神奇的事情发生了，我们得到了这样一个效果：通过对比度滤镜把高斯模糊的模糊边缘给干掉，将原本的直角，变成了圆角，Amazing。...radial-gradient(circle at 50% -10px, transparent 0, transparent 60px, #000 60px, #000 0); } } 我们就可以得到，只有中间部分是内凹圆角...，内部不建议再放置 DOM，最好当做背景使用，内部内容可以通过其他方式叠加在其上方即可。

8132 0

玻璃拟态（Glassmorphism）设计风格

它不适用于按钮或开关（这些重要的界面元素应该具备高对比度，更加清晰明确），模糊效果也要注意分寸，屏幕上过度使用模糊效果，会使整个 UI 对某些用户可阅读性差，同时也会使页面看起来显脏。...整个效果的基础是阴影、透明度和背景模糊的组合，这种风格只能使用一个透明层，或者多个透明层，但当至少两个半透明层出现在一个相当繁忙的彩色背景上时，它是最突出和可见的。...设置透明度无论如何，你不能让整个形状透明，只有让它的填充透明才行。大多数设计工具在填充为100%，对象透明度较低时，背景模糊会不起作用。...这样，某些用户几乎无法访问整个UI，同时也使其变得无聊和原始。仅当这些透明效果只是装饰性的，而不是体验的组成部分时，才会发生这种情况。...class="container"> 后记毛玻璃拟态（Glassmorphism）是Michal Malewicz提出的一种新的设计风格，

1.8K3 0

CSS 也能实现烟雾效果？

像是这样：仔细观察烟雾效果，有两个比较重要的特点：模糊效果颗粒感首先看模糊效果，想到模糊，大部分同学首先都会想到使用 filter: blur() 。...当然没错，不过在 CSS 中，除了滤镜，我们还能使用一类其他手段去模拟模糊的效果。...举个简单的例子，假设有这样几个字： SMOKE 简单的 CSS： div { background: linear-gradient(#fff, #999, #ddd,..., #888); background-clip: text; filter: blur(5px); } 整个效果就瞬间烟雾化了很多：好，给它添加上循环的动画效果，简单的借助 JavaScript...属性调节控制的 scale 属性调节将的 numOctaves 属性由 30 改成 70，基本就看不到文字的轮廓了，文字整个雾化

1K4 0

理论 | 前端不为人知的一面–前端冷知识集锦

important; } 简单的文字模糊效果以下两行简单的CSS3代码可达到将文字模糊化处理的目的，出来的效果有点像使用PS的滤镜，so cool!... CSS中也可以做简单运算通过CSS中的calc方法可以进行一些简单的运算，从而达到动态指定元素样式的目的。...如果不指定，默认基数是10进制。略屌！...于是可以重写掉默认的log方法，把将要log的文字应用到CSS的模糊效果，这样当有人试图调用console.log()的时候，出来的是模糊不清的文字。好冷，我表示没有笑。...为真，则还要继续执行后面的代码来确定整个表达式的真假。

4992 0

CSS mask 实现鼠标跟随镂空效果

偶然在某思看到这样一个问题，如何使一个div的部分区域变透明而其他部分模糊掉？，最后实现效果是这样的：进一步，还能实现任意形状的镂空效果：鼠标经过的地方清晰可见，其他地方则是模糊的。.../wordpress/2019/11/css-backdrop-filter/ 需要注意的是，这种模糊与背景的半透明度没有任何关系，哪怕元素本身是透明的，仍然会有效果。...其实也好理解，只有圆形区域才是真实的结构，外面都是阴影，所以最后作用的范围也只有圆形部分。 2....由于::before的尺寸占据整个容器，所以整个背后都变模糊了，圆形外部比较暗是因为半透明渐变的影响。总之还是不能满足我们的需求，需要寻求新的解决方式。...五、CSS MASK 实现镂空与其说是让圆形区域不模糊，还不如说是把那块区域给镂空了。就好比之前是一整块磨砂玻璃，然后通过 CSS MASK 打了一个圆孔，这样透过圆孔看到后面肯定是清晰的。

2.4K2 0

巧用模糊实现视觉的 3D 效果

像是这样：而在 CSS 中，我们可以利用模糊滤镜 filter: blur() 与 transform-style: preserve-3d 来实现它们。...接下来我们就需要补充一下模糊的效果，让距离我们近的文字清晰，远离我们的文字模糊。...：完整的代码，你可以戳这里 -- CSS 灵感 -- 利用 filter:blur 增强文字的 3D 效果使用模糊构建落叶效果合理运用模糊，是能在没有 transform-style: preserve...之前在 Youtube 的一个视频教学网站看到了下面这个落叶效果，就是利用模糊以及简单的层级关系，让整个画面看上去非常的真实： Falling Leaves <...CodePen Demo -- Falling leaves 最后好了，本文到此结束，希望对你有帮助更多精彩 CSS 效果可以关注我的 CSS 灵感更多精彩 CSS 技术文章汇总在我的 Github

4833 0

CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

），而且遮罩层与图片重合的部分将变为空白一片，另外在IE11浏览器文档模式为5.5~9下滤镜均失效（元素按照没有设置滤镜的方式被渲染显示）。...CSS3滤镜的实现 .blur{ /** 格式，filer: blur(模糊半径) * 模糊半径，取值范围0~Npx，0为无效果...: url(blur.svg); } 使用Canvas作处理，高斯模糊的算法请参考：阮老师的“高斯模糊的算法”参考译文，处理库StackBlur.js...不过，根据我的对比测试，radius好像与CSS中filter滤镜的模糊值不是1:1匹配的，反倒是有些类似2:1....也就是这里的20px的半径模糊近似于CSS中blur滤镜值设置为10px; blurAlphaChannel为布尔属性，表示aplha透明通道是否要模糊，true表示要模糊。

1.8K10 0

用CSS让你的文字更有文艺范

9B%B4%E6%96%87%E8%89%BA/#more 透明文字，模糊文字，镂空文字，渐变文字，图片背景文字，用CSS让你的文字也有freestyle～前言我们做页面涉及字体的时候，最多就是换个...两种区别是用rgba只是对文字有透明度，而opacity对整个div都有遮罩影响，对比其两个div的背景颜色即可发现区别。...模糊文字在css中并没有指定文字模糊的样式，但是可以用text-shadow喝-webkit-text-fill-color组合，得出模糊文字，即用text-shadow制造底层模糊文字，用-webkit-text-fill-color...将x，y偏移量设置为0，也就是不偏移，设置味5px的模糊程度，重点是下面的fill-color设置为transparent透明，这样就把底层的模糊字体体现出来，效果如下： ?...总结单个CSS看起来似乎只是个简单的样式功能，但是用多个CSS样式组合，能给我们一些惊喜的效果，这篇短文只是简单的列出几个效果，还有更多酷炫的效果等着小伙伴们去挖掘～

1.1K2 0

CSS 火焰？不在话下

如上图，整个蜡烛的骨架，除去火焰的部分很简单，掠过不讲。主要来看看火焰这一块如何生成，并且如何赋予动画效果。...Step 1: filter blur && filter contrast 模糊滤镜叠加对比度滤镜产生的融合效果。...仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。...这里也是利用了 filter 的融合效果，我们在上述火焰中，利用 SASS 随机均匀分布大量大小不一的圆形棕色 div ，隐匿在火焰三角内部，大概是这样： ?...最后本文只是简单的介绍了整个思路过程，许多 CSS 代码细节，调试过程没有展现出来。

9964 0

谁说不能用代码实现酷炫的文字特效？

而在CSS3流行的当下，我们可以直接使用CSS3的text-shadow属性来制作阴影，以达到不使用图片也能给文字增加质感的效果，而这个属性主要有两个作用，产生阴影和模糊主体。...初识text-shadow text-shadow曾经在CSS2中就有出现过，只是后来被抛弃了，直到现在的CSS3中又把它重新捡了回来。..." type="text/css" href="css/reset.css" /> .wrap { width...用text-shadow制作模糊的效果有两个注意点，其一，使用transparent把文本的颜色设置为透明，如果模糊值越大，其效果越模糊。其二，不设置任何方向的偏移值，如上述的代码案例。...但是有个注意点，制作描边的阴影效果不设置模糊值。 6）3D文字 3D效果是可视化程度最好的，能够给人一个空间感。

2.4K3 0

巧用滤镜实现高级感拉满的文字快闪切换效果

当然，今天并非是想用 CSS 实现上述的的效果。...： CodePen Demo -- filter mix between blur and contrast 仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉...，利用高斯模糊实现融合效果。... @import url('https://fonts.googleapis.com/css2?...： CodePen Demo -- 纯 CSS 实现文字融合快闪切换效果整个动画的两个核心关键点：利用了 blur 滤镜混合 contrast 滤镜产生融合效果在上一个文字消失的过程中，显示下一个文字

1.5K2 0

filter: contrast() 配合 filter: blur() 的奇妙化学作用

()：给图像设置高斯模糊效果。...仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。...神奇的事情发生了，我们得到了这样一个效果：通过对比度滤镜把高斯模糊的模糊边缘给干掉，将原本的直角，变成了圆角，Amazing。...如果不切图，使用纯 CSS 的话，需要使用两层渐变进行叠加，大概是这样，感受一下：其代码也比较复杂，需要不断的调试渐变，使两个径向渐变吻合： div { position: relative...这里，对于大部分场景，我们可以借助 SVG 滤镜，在 CSS 中一行引入，实现同样的功能。

1.2K4 0

涨姿势了，有意思的气泡 Loading 效果

translate(-50%, var(--dis)); opacity: .4; } } 核心在于 @for $i from 1 through 100 { } 这段 SASS 代码内部...如果你还不了解这个技巧，可以戳我的这篇文章看看：你所不知道的 CSS 滤镜技巧与细节简述下该技巧：单独将两个滤镜拿出来，它们的作用分别是： filter: blur()：给图像设置高斯模糊效果。...仔细看两圆相交的过程，在边与边接触的时候，会产生一种边界融合的效果，通过对比度滤镜把高斯模糊的模糊边缘给干掉，利用高斯模糊实现融合效果。...基于此，我们再简单改造下我们的 CSS 代码，所需要加的代码量非常少：加上滤镜 blur() 和 contrast() ，形成融合粘性效果加上整个圆环的旋转即可效果加上滤镜 hue-rotate(...生成 N 个一样大小的小球元素，定位在整个容器的中间 <ul class="g-bubbles

5773 0

微软出品自动化测试神器【Playwright+Java】系列（十一）元素定位详解

一、写在前面又有很久没更文了，真的是被催婚搞的整个人情绪特别不好，如果硬要形容的话，那就是没法跟人正常沟通，一点就着，做什么都没耐心，看什么都烦，简直没救了......，在内部的某个地方，可能在子元素或后代元素中。...匹配不区分大小写，理解为模糊匹配,应注意与其他CSS说明符一起使用，否则将匹配所有包含指定文本的元素，包括。...匹配不区分大小写，还是模糊匹配，就是指定范围了。...6、在给定范围内元素，匹配元素给定元素的范围「的参数传递的任何选择器」至少匹配一个元素，它将返回一个元素,也是模糊匹配！

6182 0

CSS笔记(9)

CSS部分: .box2 { width: 100px; height: 100px; border: 1px solid...text-align: center; margin: 100px auto; border-radius: 51px; HTML部分...: 123 效果图: 参数值可以为数值或者百分比的形式如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度一半即可...color 可选.阴影的颜色 inset 可选,将外部阴影(outset)改为内部阴影我放了一个盒子,尝试了一下.阴影的颜色最好用rgba来写,可以调整透明度,否则阴影会显得非常生硬. div...文字阴影: 在CSS3中,我们可以使用text-shadow来添加文字阴影效果.

3221 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭