html - 如何在背景速记中实现CSS模糊?

原文 标签 html css background blur shorthand

目的是使背景模糊而不使背景上方的所有其他元素模糊。

对我来说,使用单独的div作为背景和内容并依赖z-index的方法对我来说有点不灵活,因此我想知道是否可以在背景速记语法中实现CSS模糊过滤器(因为“ background-filter :blur(5px)“是无效的CSS),只会将其应用于背景。

Tesla用速记符号做得很好,但是他们使用了透明/黑色渐变,而我想使用模糊。这是我尝试过的一些简化代码,这些代码基于Tesla登录页面:

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="the-CSS-Written-Below">
    </head>
    <body class="background-image">
        <div style="background-color: yellow">
            <p>Some text that shouldn't be blurred!</p>
        </div>
    </body>
</html>


CSS:

.background-image{
    background: radial-gradient(transparent, hsl(0, 0%, 2%)), gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed;
}


这是一个JSFiddle,因此您可以看到它的外观。

然后,当我尝试将该速记滤波器从“径向渐变”更改为“模糊”时,它将停止工作:

CSS:

.background-image{
    background: blur(5px), gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed;
}


我不确定这里的模糊语法是否不合适/简写形式是否需要不同,或者这可能是完全错误的解决方法。这样甚至可能使速记模糊吗?

最佳答案

问题在于blur不是background属性的值,而是filter的值。根据Mozilla


  background CSS属性是用于在样式表中的单个位置设置各个背景值的简写。 background可用于设置以下一项或多项的值:


Tesla可以使用background-gradient,因为background-image属性can have是其值:


  
  其中 =无| <图像>
  其中 = | | | | | <渐变>


要完成您想要的操作,将需要2个div,如下所示:



.background-image {
    background: gray url(http://leecamp.net/wp-content/uploads/kitten-3.jpg) no-repeat center center fixed;
    position: fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    z-index:0;
    filter:blur(5px);
}

<body>
    <div class="background-image"></div>
    <div style="background-color: yellow;position:relative;">
        <p>Some text that shouldn't be blurred!</p>
    </div>
</body>





请注意,您必须在其他div中添加position:relative,使其显示在背景图像div上方。

我已经使用CSS3 vw(view-width)和vh(view-height)来强制background-image div的宽度和高度,但是可以使用%代替。

关于html - 如何在背景速记中实现CSS模糊?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45603203/

相关文章:

javascript - Javascript 中的 PS3 原始主题

html - 更改 Bootstrap 进度条背景(不是进度条,而是条形背景)

html - 如何仅从CSS更改图像?

html - 将相对内容放在绝对 div 上

html - 如果用户调整浏览器大小,我如何制作水平滚动条?

jquery - 引导 ScrollSpy : Hide the vertical navigation bar

php - 需要帮助将文字换行到台式机和移动设备的列中

javascript - Draggable 不拖动

html - CSS 背景线性渐变曲线

algorithm - 如何获得洪水填充算法来应对闭合圆?