使用CSS3滤镜添加背景图像的最佳方法 [英] Best way to add background image with css3 filters

问题描述

我目前有以下代码:

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过滤器(模糊) +不透明，我计划在网站的某些部分制作动画.

The image is used as a sitewide background-image for a new platform and the reason for not just putting it into the body as a background-image is that I want to be able to use the CSS3 Filter (blur) on it + opacity, which for both I plan to animate in certain sections of the site.

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

However if I do this I have to use absolute positioning for all other content on the site which is kinda messy. Is there a better way to insert this image as a background without using absolute positioning?

我非常喜欢仅使用CSS3的解决方案.

I strongly prefer a CSS3-only solution.

推荐答案

使用伪元素添加图像，就像这样，您可以在顶部浮动其他内容.

Add the image using pseudo element, like this, and you can have other content floating on top.

如果z-index: -1;出现问题，该问题使图像保留在背景中，则可以将其删除，并直接将其子对象赋予position: relative.

If you get issues with the z-index: -1;, which keep the image to stay in the background, you can remove it and give immediate children of the body position: relative instead.

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滤镜添加背景图像的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！