Question

我试图让背景图片模糊，但是当我尝试这一切时，页面上的所有内容都会变得模糊。

<!DOCTYPE html>
<html>
<head>
    <title>Website</title>
    <link rel="stylesheet" type="text/css" href="style2.css">

</head>
<body>
    <div class="profil-box">
    <img src="bilder/Anders.jpg" class="profil-bilde">
        <h1> Anders Magnus Klingsholm </h1>
            <h5> CV </h5>
    </div>  
</body>
</html>

html { 
  background: url(bilder/copenhagen1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.profil-box {
    width: 400px;
    height: 400px;
    background: rgba(0,0,0,0.4);
    padding: 40px;
    color: white;
    margin: 0 auto;
    margin-top: 140px;
    text-align: center;
    font-family: "Helvetica Neue", sans-serif;
}
.profil-bilde   {
    border-radius: 50%;
    height: 200px;
    width: 200px;
}

Answer 1

您可以使用css过滤器：

img {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

由于你不能在身体中使用，你可以创建一个div来填充背景：

#back {
		background: url(http://placekitten.com/g/800/600) no-repeat center center fixed; 
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		filter: blur(4px);
	}

<div id="back"></div>

Answer 2

使用css过滤器模糊图像的主要问题是它会影响所有子节点。所以不要模糊真实的背景。放置另一个图像并使用z-index和绝对位置将其定位为背景。

z-index: -1;
position: absolute;

还要记住将其他背景设置为透明，以便查看其背后的其他图像。

.background-blurred {
  -webkit-filter: blur(4px);
  filter: blur(4px);
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
}

p {
  color: white;
  font-size: 24px;
  padding: 15px;
}

<div>
<div class="content">
  <p> Content of the website</p>
</div>
<img class="background-blurred" src="https://source.unsplash.com/random/800x800" />
</div>

Answer 3

嗯，根据给定的信息...... 如果要设置具有模糊效果的背景图像，最好的方法是放置已经模糊的图像 但是......
有一个CSS属性可以让你申请filter 你可以看到它并非真正支持here。

将固定背景设置为整页的示例：

#my_bg_block {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: url(path/to/my/image) center center no-repeat;
    background-size: cover;
    filter: blur(15px);
}

我希望背景图片模糊

3 个答案: