R

RockPaperLz- Mask it or Casket

看看这个pen。

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

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

它们都与 position: fixed 和 left: 0; right: 0; 放在一起。显示它们的差异来自为元素设置不同的 z-index 值。

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

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Duis aliquam erat in ante malesuada, facilisis semper nulla semper。 Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero。 sed sed turpistellus。 Etiam ac aliquam tortor，eleifend rhoncus metus。 Ut turpis massa，sollicitudin sat amet molestie a，posuere sit amet nisl。 Mauris tincidunt cursus posuere。 Nam commodo libero quis lacus sodales, nec feugiat ante posuere。 Donec pulvinar actor commodo。 Donec egestas diam ut mi adipiscing，quis lacinia mauris condimentum。 Quisque quis odio venenatis，venenatis nisi a，vehicula ipsum。 Etiam 在 nisl eu felis vulputate porta。

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。 Vestibulum tempor，erat in mattis fringilla，elit urna ornare nunc，vel pretium elit sem quis orci。 Vivamus condimentum dictum tempor。 Nam at est ante。 sed lobortis et lorem 在 sagittis。怀疑在 est et vehicula。

为 Lorem Ipsum 文本道歉。

更新

感谢 Matthew Wilcoxson 使用 .content::before 更好地实施 https://codepen.io/akademy/pen/FlkzB

更好的方法是使用 .content:before 而不是额外的“背景图像”标记。我在这里更新了笔：codepen.io/akademy/pen/FlkzB

fwiw，只有 Webkit 实现了这个功能，而且只有 vendor 前缀，所以 ms-, o-, moz- 前缀是没有用的。

Firefox 35.0 及更高版本默认支持它：caniuse.com/#feat=css-filters

JUst 更新到 FF 35，它可以在没有前缀的情况下工作

@EdwardBlack 我认为这不是问题，但要永久模糊，您将不得不求助于图像编辑工具。另一种方法可能是使用 phantomJS/headless webkit 浏览器进行某种图像捕获，然后提供它，但这是实现相同结果的乏味方法。

R

RockPaperLz- Mask it or Casket

pen

消除对额外元素的需求，同时使内容适合文档流，而不是像其他解决方案那样固定/绝对。

使用实现

.content { /* 这是必需的，否则背景会在顶部偏移几个像素 */ overflow: auto;位置：相对； } .content::before { 内容：“”；位置：固定；左：0；右：0； z 指数：-1；显示：块；背景图片: url('https://i.imgur.com/lL6tQfy.png');背景尺寸：封面；宽度：100%；高度：100%； -webkit-filter：模糊（5px）； -moz过滤器：模糊（5px）； -o-过滤器：模糊（5px）； -ms-过滤器：模糊（5px）；过滤器：模糊（5px）； }

Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。

编辑如果您有兴趣移除边缘的白色边框，请使用 110% 的宽度和高度以及 -5% 的左侧和顶部。这会稍微放大你的背景——但边缘不应该有纯色渗出。感谢 Chad Fawcett 的建议。

.content { /* 这是必需的，否则背景会在顶部偏移几个像素 */ overflow: auto;位置：相对； } .content::before { 内容：“”；位置：固定；前5％;左：-5%；对：-5%； z 指数：-1；显示：块；背景图片: url('https://i.imgur.com/lL6tQfy.png');背景尺寸：封面；宽度：110%；高度：110%； -webkit-filter：模糊（5px）； -moz过滤器：模糊（5px）； -o-过滤器：模糊（5px）； -ms-过滤器：模糊（5px）；过滤器：模糊（5px）； }

Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。

这样做的限制是你不能在 js 中操作伪元素。如果您不需要，那么这是一个很好的解决方案。

如果您不喜欢模糊的白色边框，可以将 width 和 height 增加到 110%，然后将 -5% 的偏移量添加到 content:before 类的 top 和 left。

它对我有用，但我希望在用户滚动页面时也滚动该背景图像。固定位置正在阻止它。如何摆脱这个问题？

h

hitautodestruct

如其他答案所述，这可以通过以下方式实现：

模糊图像的副本作为背景。

可以过滤然后定位在内容后面的伪元素。

您还可以使用背景过滤器

有一个名为 backdrop-filter 的受支持属性，目前在 Chrome 76、Edge、Safari 和 iOS Safari 中受支持（有关统计信息，请参阅 caniuse.com）。

从 Mozilla devdocs：

背景过滤器属性提供了像模糊或颜色移动元素后面的区域这样的效果，然后可以通过调整元素的透明度/不透明度通过该元素看到。

有关使用情况统计信息，请参阅 caniuse.com。

你会像这样使用它。如果您不希望内部内容模糊，请使用实用程序类 .u-non-blurred

.background-filter::after { -webkit-backdrop-filter: blur(5px); /* 用于 Safari 9+、Edge 17+（没错）和 iOS Safari 9.2+ */ background-filter: blur(5px); /* Chrome 76 支持 */ content: "";显示：块；位置：绝对；宽度：100%；高度：100%；顶部：0； } .background-filter { 位置：相对； } .background { background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');宽度：200px；高度：200px； } /* 用于不应模糊的内容 */ .u-non-blurred { position: relative; z-index：1； }

Kermit D. Frog

更新 (12/06/2019)：Chromium 将在版本 76 中默认启用 backdrop-filter，其中 is due out 30/07/2019。

更新（2019 年 1 月 6 日）：Mozzilla Firefox 团队has announced将很快开始实施此功能。

更新 (21/05/2019)：Chromium just announced backdrop-filter 在 chrome canary 中可用，无需启用“启用实验性 Web 平台功能”标志。这意味着 backdrop-filter 非常接近在所有 chrome 平台上实现。

即使它不适用于所有浏览器，你也会得到我的投票，因为它提供了规范正确的非黑客方式来做到这一点。

AFAIK 这是一个非标准功能，因此没有规范。

小心！在 2018 年，浏览器对此的支持显着下降！在 Edge、Firefox 或 Chrome 中不受支持。

@protoEvangelion 似乎它将在 Edge 16+ 中可用，而且我没有看到任何其他浏览器说他们不会实现这一点。有任何事实支持这些说法吗？

@hitautodestruct 根据 caniuse.com IE，Edge 16、Firefox 和 Chrome 目前默认不支持此功能。你说得对，Edge 17+ 支持这一点。感谢您指出了这一点。顺便说一句，很酷的答案，我确实希望浏览器实现这一点:)

T

TylerH

为了做到这一点，您需要重新构建您的 HTML。您必须模糊整个元素才能模糊背景。所以如果你只想模糊背景，它必须是它自己的元素。

S

Sumitava Das

请检查以下代码：-

.backgroundImageCVR{ 位置：相对；填充：15px； } .background-image{ 位置：绝对；左：0；对：0；顶部：0；底部：0；背景：url（'http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg'）；背景尺寸：封面； z-索引：1； -webkit-filter：模糊（10px）； -moz-过滤器：模糊（10px）； -o-过滤器：模糊（10px）； -ms-filter：模糊（10px）；过滤器：模糊（10px）； } .content{ 位置：相对； z-索引：2；颜色：#fff; }

Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Duis aliquam erat in ante malesuada, facilisis semper nulla semper。 Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero。 sed sed turpistellus。 Etiam ac aliquam tortor，eleifend rhoncus metus。 Ut turpis massa，sollicitudin sat amet molestie a，posuere sit amet nisl。 Mauris tincidunt cursus posuere。 Nam commodo libero quis lacus sodales, nec feugiat ante posuere。 Donec pulvinar actor commodo。 Donec egestas diam ut mi adipiscing，quis lacinia mauris condimentum。 Quisque quis odio venenatis，venenatis nisi a，vehicula ipsum。 Etiam 在 nisl eu felis vulputate porta。

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。 Vestibulum tempor，erat in mattis fringilla，elit urna ornare nunc，vel pretium elit sem quis orci。 Vivamus condimentum dictum tempor。 Nam at est ante。 sed lobortis et lorem 在 sagittis。怀疑在 est et vehicula。

P

Peter Mortensen

以下是纯 CSS 中带有“before”伪元素的现代浏览器的简单解决方案，例如 Matthew Wilcoxson 的解决方案。

为了避免访问伪元素以更改 JavaScript 中的图像和其他属性，只需使用 inherit 作为值并通过父元素（此处为 body）访问它们。

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

它对我不起作用。你有一个工作的jsfiddle吗？

I

ItsKrsna

在 CSS 的 .content 标签中将其更改为 position:absolute。否则，呈现的页面将无法滚动。

P

Peter Mortensen

当然，这不是 CSS 解决方案，但您可以将 CDN Proton 与 filter 一起使用：

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

它来自https://developer.wordpress.com/docs/photon/api/#filter

测试时有什么巧妙的方法可以使 localhost 工作？

大分辨率图像的模糊量太微妙了，如何大幅增加模糊量而不让它看起来像块状？宽度有点帮助，但如果我模糊太多，它看起来太块状了

C

Community

尽管提到的所有解决方案都非常聪明，但当我尝试它们时，似乎都存在小问题或与页面上其他元素的潜在连锁效应。

最后，为了节省时间，我只是回到了我的旧解决方案：我使用 Paint.NET 并转到效果，半径为 5 到 10 像素的高斯模糊，然后将其保存为页面图像。 :-)

HTML：

<body class="mainbody">
</body

CSS：

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

编辑：

我终于让它工作了，但解决方案绝不简单！看这里：

过滤器：模糊（1px）；不适用于 Firefox、IE 和 Opera

你下载2张图片

P

Peter Mortensen

您真正需要的只是“过滤器”：

blur(«WhatEverYouWantInPixels»);"

身体{颜色：#fff;字体系列：Helvetica、Arial、无衬线字体； } #background { background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg') ;背景重复：不重复；背景尺寸：封面；宽度：100vw；高度：100vh；溢出：隐藏；位置：绝对；顶部：0；左：0； z 指数：-1； /* START */ /* START */ /* START */ /* START */ /* 你可以根据需要调整模糊半径 */ filter: blur(3px); }

Lorem Ipsum

E

Eljeddi Oussema

现在，通过使用 CSS GRID，这变得更加简单和灵活。您只需将模糊背景 (imgbg) 与文本 (h2) 重叠

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

和CSS：

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

s

s1n7ax

CSS网格对我来说更容易理解。 :)

html，正文 { 宽度：100%;高度：100%； } .container { 宽度：100%;高度：100%；显示：网格；网格模板列：1fr 6fr 1fr；网格模板行：1fr 6fr 1fr；网格模板区域：'。 . 。 '。内容。' '。 . ';证明内容：中心；对齐项目：居中； } .backbround { 宽度：100%;高度：100%；网格面积：1/1/5/5；背景图片：网址（https://i.imgur.com/aUhpEz3.jpg）；过滤器：模糊（5px）；背景位置：中心；背景重复：不重复；背景尺寸：封面； } .content { 高度：200px;位置：相对；网格区域：内容；显示：弯曲；证明内容：中心；对齐项目：居中；白颜色; }

Hello World

哈哈……没有适合你的老派东西，直接进入网格……喜欢它。

P

Peter Mortensen

此答案适用于具有动态高度和图像的 Material Design 水平卡片布局。

为防止由于卡片的动态高度而导致图像失真，您可以使用带有模糊的背景占位符图像来调整高度变化。

解释

该卡片包含在一个带有类包装器的

中，它是一个 flexbox。

卡片由两个元素组成，一个也是链接的图像和内容。

链接，类链接，是相对定位的。

该链接由两个子元素组成，一个占位符

类模糊和一个类 pic，它是清晰的图像。

两者都是绝对定位并具有宽度：100%，但类 pic 具有更高的堆栈顺序，即 z-index: 2，它将其置于占位符之上。

模糊占位符的背景图像是通过 HTML 中的内联样式设置的。

代码

.wrapper { 显示：弹性；宽度：100%；边框：1px 实心 rgba(0, 0, 0, 0.16);盒子阴影：0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);背景颜色：#fff；保证金：1rem auto；高度：自动； } .wrapper:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .link { 显示：块；宽度：200px；高度：自动；溢出：隐藏；位置：相对；右边框：2px 实心#ddd； } .blur { 位置：绝对；顶部：0；左：0；右：0；底部：0；边距：自动；宽度：100%；高度：100%；过滤器：模糊（5px）； -webkit-filter：模糊（5px）； -moz过滤器：模糊（5px）； -o-过滤器：模糊（5px）； -ms-过滤器：模糊（5px）； } .pic { 宽度：计算（100% - 20px）；最大宽度：100%；高度：自动；边距：自动；位置：绝对；顶部：0；左：0；右：0；底部：0； z指数：2； } .pic:hover { transition: all 0.2s ease-out;变换：比例（1.1）；文字装饰：无；边框：无； } .content { 显示：弹性；弹性方向：列；宽度：100%；最大宽度：100%；填充：20px；溢出-x：隐藏； } .text { 边距：0; }

Agendum dicendo memores du gi ad。 Perciperem 场合em ei ac im ac designabam。 Ista rom sibi vul apud tam。 Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo。自愿 ingressus infirmari ex mentemque ac manifeste eo。 Ac gnum ei utor sive se。 Nec curant contra seriem amisit res gaudet adsunt。

S

Simas Joneliunas

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

为您的答案添加解释会很棒。

c

code builders

不使用伪类 from

身体{背景：#cecece; font-family：“范围一”，衬线；字体大小：12px；颜色：黑色;边距：0 自动；高度：100%；宽度：100%；背景图像：线性渐变（到底部，rgba（0, 0, 0, 0.8），rgba（0, 0, 0, 0.81）），url（https://i.imgur.com/2rRMQh7.jpg） ; -webkit-background-size：封面； -moz-background-size：封面； -o-background-size：封面；背景尺寸：封面； } <正文>

p

pat

您可以在要应用过滤器的图像上创建一个 div，并将 backdrop-filter 用于其 CSS 类。查看this link

欢迎提供解决方案链接，但请确保您的答案是 useful without it。最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改并且answers that are little more than a link may be deleted，则仅链接答案可能会变得无效。

u

user18009835

<!-- Q:Create the blur on parenttal div without effecting the child div -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0; padding: 0; box-sizing: border-box;
        font-size: 30px;
    }
    .parent{
background-image:url(hobby.jpg) ;
height: 100vh;
width: 100vw;
background-repeat: no-repeat;
background-size: cover;
background-position: center;

display: flex;
justify-content: center;
align-items: center;
    }
    .child{
   
    height: 90vh;
    width: 90vw;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.418);
  justify-content: center;
  align-items: center;
    display: flex;
    
 
    }
  .text{
    
      height: 300px;
      width: 300px;
      border-radius: 500px;
      background-image: url(50cf380e5c78eb174faa8e6ac2cb654a.jpg);
      background-size: cover;
      background-position: center;
      

  }
    
    
</style>
<body>
    <div class="parent">
        <div class="child">
       <div class="text"></div>
        </div>
    </div>
</body>
</html>

您的答案可以通过额外的支持信息得到改进。请edit添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。您可以找到有关如何写出好答案的更多信息in the help center。

P

Peter Mortensen

这不是我写的，但我注意到有一个使用 CSS SASS 编译器的部分支持的 backdrop-filter 的 polyfill，所以如果你有一个编译管道，它可以很好地实现（它也使用 TypeScript）：

https://codepen.io/mixal_bl4/pen/EwPMWo

P

Peter Mortensen

div {背景：继承；宽度：250px；高度：350px；位置：绝对；溢出：隐藏； /* 添加溢出隐藏 */ } div:before { content: '';宽度：300px；高度：400px；背景：继承；位置：绝对；左：-25px； /* 给负 -25px 左侧位置 */ right: 0;顶部：-25px； /* 给负-25px 顶部位置 */ bottom: 0;盒子阴影：插图 0 0 0 200px rgba(255, 255, 255, 0.3);过滤器：模糊（10px）； }

E

Elikill58

成功应用背景图片的步骤

确保您使用链接标签正确链接了您的 html 和 css 我不知道相对目录和子目录，所以我无法评论它最好的方法对我有用的是当我在 css 中使用 URL 链接时

#yourcssdoc .image {
   background-image: url("paste your link here with the quotations")
}

哥们，你可能错过了他的问题。该问题与 blur 不起作用有关，而不是与如何显示图像有关。

P

Peter Mortensen

如果您希望内容可滚动，请将内容的位置设置为绝对：

content {
   position: absolute;
   ...
}

我不知道这是否只适合我，但如果不是，那就是解决方法！

另外由于背景是固定的，这意味着你有一个“视差”效果！所以现在，这个人不仅教你如何制作模糊背景，而且还是视差背景效果！

不回答问题

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

Kermit D. Frog

Hello World

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

联系我们