我有一个JPEG文件,我使用作为搜索页面的背景图像,我使用CSS来设置它,因为我在Backbone.js上下文中工作:

background-image: url("whatever.jpg");

我想应用css3模糊过滤器只对背景,但我不确定如何样式只是一个元素。如果我试着:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

就在我的CSS中的background-image下面,它为整个页面设置了样式,而不仅仅是背景。是否有一种方法只选择图像并应用过滤器?或者,有没有一种方法可以关闭页面上所有其他元素的模糊效果?


当前回答

在CSS的.content选项卡中将其更改为position:absolute。否则,渲染的页面将不可滚动。

其他回答

如果你想要内容是可滚动的,设置内容的位置为绝对:

content {
   position: absolute;
   ...
}

我不知道这是不是只适合我,但如果不是,这就是解决办法!

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

规范引入了一个新的filter()函数,你可以像下面这样使用背景图像:

background: filter(url("whatever.jpg"), blur(5px));

<filter()>函数有两个参数。第一个参数是<image>。第二个是为CSS filter属性指定的筛选器函数列表。该函数接受参数并应用筛选规则,返回一个处理图像。

但是浏览器不支持这个:https://caniuse.com/css-filter-function。目前只能在Safari上进行测试。

你所需要的只是“filter”:

blur(«WhatEverYouWantInPixels»);"

body { color: #fff; font-family: Helvetica, Arial, sans-serif; } #background { background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg'); background-repeat: no-repeat; background-size: cover; width: 100vw; height: 100vh; overflow: hidden; position: absolute; top: 0; left: 0; z-index: -1; /* START */ /* START */ /* START */ /* START */ /* You can adjust the blur-radius as you'd like */ filter: blur(3px); } <div id="background"></div> <p id="randomContent">Lorem Ipsum</p>

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

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

html, body { width: 100%; height: 100%; } .container { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 6fr 1fr; grid-template-rows: 1fr 6fr 1fr; grid-template-areas: '. . .' '. content .' '. . .'; justify-content: center; align-items: center; } .backbround { width: 100%; height: 100%; grid-area: 1/1/5/5; background-image: url(https://i.imgur.com/aUhpEz3.jpg); filter: blur(5px); background-position: center; background-repeat: no-repeat; background-size: cover; } .content { height: 200px; position: relative; grid-area: content; display: flex; justify-content: center; align-items: center; color: white; } <div class="container"> <div class="backbround"></div> <div class="content"><h1>Hello World</h1></div> </div>