Fatal编程技术网
  • css/
  • 如何将CSS过滤器应用于背景图像

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

css

如何将CSS过滤器应用于背景图像,css,background-image,css-filters,Css,Background Image,Css Filters,我有一个JPEG文件，用作搜索页面的背景图像，我使用CSS进行设置，因为我在上下文中工作： background-image: url("whatever.jpg"); 我只想将CSS 3模糊过滤器应用于背景，但我不确定如何仅设置一个元素的样式。如果我尝试： -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); 就在我

我有一个JPEG文件，用作搜索页面的背景图像，我使用CSS进行设置，因为我在上下文中工作：

background-image: url("whatever.jpg");
我只想将CSS 3模糊过滤器应用于背景，但我不确定如何仅设置一个元素的样式。如果我尝试：

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
就在我的CSS中
背景图像的下方
，它设置了整个页面的样式，而不仅仅是背景。有没有办法只选择图像并对其应用过滤器？或者，是否有一种方法可以关闭页面上所有其他元素的模糊功能？

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

为了做到这一点，你需要重新构造背景。为了模糊背景，必须模糊整个元素。因此，如果你只想模糊背景，它必须是它自己的元素。

看看这个

您必须使用两个不同的容器，一个用于背景图像，另一个用于内容

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

它们都放置在
位置：fixed
和
left:0；右：0。显示它们的差异来自于为元素设置了不同的
z-index
值



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



Lorem ipsum dolor sit amet，是一位杰出的献身者。两人互不平等，一人无利。Phasellus sapien neque，malesuada quis、lacinia和libero的faucibus。特鲁斯特鲁斯。埃蒂亚姆·阿利奎姆·托托，埃利芬德
大菱鲆。但图尔皮斯·马萨，索利西图丁坐在一个小房间里，波苏尔坐在一个小房间里。毛里斯·汀西登·库苏斯·波苏尔。南康莫多自由之家是苏打莱斯之家，而不是在波苏尔之家。Donec pulvinar拍卖行Comodo。不要用直径来测量，
拉齐尼亚莫里斯调味品。维尼那提女神，维尼那提女神，同侧交通工具。nisl eu felis vulputate门户的Etiam

抚摸你的爱欲。奥古斯都的阿利奎姆·康斯奎特（Aliquam consequat）被称为康瓦利斯（sed convallis）。多内克·奥奇·乌尔纳（Donec orci urna），一对一，一对一。这是一句至理名言。不可累积，不可累积。前庭
临时的，在马蒂斯·弗林利亚的埃拉特，在阿尔纳·奥纳·努克的精英，在奥奇的精英阶层。即兴调味品。不可能。在矢状体中的Sed lobortis和lorem。在东部和东部的交通工具中


看看这个

您必须使用两个不同的容器，一个用于背景图像，另一个用于内容

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

它们都放置在
位置：fixed
和
left:0；右：0。显示它们的差异来自于为元素设置了不同的
z-index
值



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



Lorem ipsum dolor sit amet，是一位杰出的献身者。两人互不平等，一人无利。Phasellus sapien neque，malesuada quis、lacinia和libero的faucibus。特鲁斯特鲁斯。埃蒂亚姆·阿利奎姆·托托，埃利芬德
大菱鲆。但图尔皮斯·马萨，索利西图丁坐在一个小房间里，波苏尔坐在一个小房间里。毛里斯·汀西登·库苏斯·波苏尔。南康莫多自由之家是苏打莱斯之家，而不是在波苏尔之家。Donec pulvinar拍卖行Comodo。不要用直径来测量，
拉齐尼亚莫里斯调味品。维尼那提女神，维尼那提女神，同侧交通工具。nisl eu felis vulputate门户的Etiam

抚摸你的爱欲。奥古斯都的阿利奎姆·康斯奎特（Aliquam consequat）被称为康瓦利斯（sed convallis）。多内克·奥奇·乌尔纳（Donec orci urna），一对一，一对一。这是一句至理名言。不可累积，不可累积。前庭
临时的，在马蒂斯·弗林利亚的埃拉特，在阿尔纳·奥纳·努克的精英，在奥奇的精英阶层。即兴调味品。不可能。在矢状体中的Sed lobortis和lorem。在东部和东部的交通工具中


在CSS的
.content
选项卡中，将其更改为
位置：绝对
。否则，呈现的页面将无法滚动。
在CSS的
选项卡中。内容
将其更改为
位置：绝对
。否则，呈现的页面将无法滚动。

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

利用



.content{
/*这是必需的，否则背景将在顶部偏移几个像素*/
溢出：自动；
位置：相对位置；
}
.内容：：以前{
内容：“；
位置：固定；
左：0；
右：0；
z指数：-1；
显示：块；
背景图像：url（'https://i.imgur.com/lL6tQfy.png');
背景尺寸：封面；
宽度：100%；
身高：1

<body class="mainbody">
</body



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;
}



content {
   position: absolute;
   ...
}



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 */
}



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



blur(«WhatEverYouWantInPixels»);"



<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>



.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;
      }



$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);
    }
}