Question

我目前有这段代码：

body {
  margin: 0;
  font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: #151626;
  width: 100vw;
  height: 100vh;
}

.bg {
  margin: 0;
  overflow: hidden;
  position: fixed;
  height: 100vh;
  top: 0;
  bottom: 0;
}
.bg figure {
  background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  transform: scale(1.05);
  filter: blur(10px);
  opacity: 0.5;
}

<div class="bg"><figure></figure></div>

图像用作新平台的全站点背景图像，不仅仅是将其作为背景图像放入体内的原因是我希望能够在其上使用CSS3过滤器（模糊） +不透明度，我计划在网站的某些部分制作动画。

但是，如果我这样做，我必须对网站上的所有其他内容使用绝对定位，这有点混乱。有没有更好的方法将此图像作为背景插入而不使用绝对定位？

我非常喜欢仅支持CSS3的解决方案。

Answer 1

使用伪元素添加图像，如下所示，您可以将其他内容浮动在顶部。

如果您遇到z-index: -1;的问题，这会让图片保留在后台，您可以将其删除，然后立即给予身体position: relative的孩子。

body {
  margin: 0;
  font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: #151626;
  height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  height: 100%;
  width: 100%;
  background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center;
  background-size: cover;
  transform: scale(1.05);
  filter: blur(10px);
  opacity: 0.5;
  z-index: -1;
}

div {
  color: white;
  font-size: 30px;
}

<div>Hey there....</div>

使用css3过滤器添加背景图像的最佳方法

1 个答案: