在模糊背景图像上显示图像。

I'm trying to display an image on top of that same image, but blurred and as background.

我试图在同样的图像上显示一个图像，但是模糊和背景。

.background-image {
  background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb');
  background-size: cover;
  display: block;
  filter: blur(5px);
  -webkit-filter: blur(10px);
  height: 800px;
  left: 0;
  position: fixed;
  right: 0;
  z-index: 1;
}

.hero-image {
  background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb');
  background-size: cover;
  border-radius: 50%;
  display: block;
}

<div class="background-image"></div>
<div class="hero-image"></div>

The present code doesn't show the hero image.

现在的代码没有显示英雄的图像。

Tried creating div inside another div but failed.

尝试在另一个div中创建div，但失败了。

Any suggestions?

有什么建议吗?

Thanks in advance.

提前谢谢。

2 个解决方案

#1

I don't know, why you want to position:fixed your background1 but, using this below shown approach you can do.

我不知道，为什么你要定位:固定你的背景，但是，用下面的方法你可以做到。

But if you try to nest your background2 inside background1 div, then the blur filter will get applied to both the images and i think, you don't want that.

但是如果你试图在background1 div中嵌套你的background2，那么模糊过滤器将会被应用到这两个图像上，我想，你不需要它。

Points:

点:

whenever using background-image you need to define height and width otherwise it won't be visible on browser.
无论何时使用背景图像，你都需要定义高度和宽度，否则浏览器上就看不到了。
when using position: absolute try having a relative parent div as well, helps you control your layout.
使用位置时:绝对尝试拥有一个相对的父div，帮助您控制布局。

.parent {
  position: relative;
  height: 800px;
  /* */
}

.background-image {
  background-image: url(http://lorempixel.com/output/nature-q-c-640-480-6.jpg);
  background-size: cover;
  display: block;
  filter: blur(5px);
  -webkit-filter: blur(10px);
  width: 100%;
  height: 800px;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 1;
}

.hero-image {
  background-image: url(http://lorempixel.com/output/people-q-c-208-204-2.jpg);
  background-size: cover;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  display: block;
}

<div class="parent">
  <div class="background-image">
  </div>
  <div class="hero-image"></div>

</div>

#2

You forgot to position the hero image fixed as well. This way, you can stack it on top of the background image. The order is ensured using a z-index.

你忘了把英雄形象定位好了。这样，你可以把它叠加在背景图像上。使用z索引确保订单。

In the below, I have edited your styles to make the order consistent and show the most important pieces first: how is an element positioned, where, at what size, then the background, then other stuff. You can now see the overlap and differences between the two images easily.

在下面的文章中，我编辑了您的样式，使顺序一致，并显示最重要的部分:如何定位元素，在哪里，在什么大小，然后是背景，然后是其他的东西。您现在可以很容易地看到这两个图像之间的重叠和差异。

Note that the -webkit- prefixed version of the filter is not needed.

注意-webkit-前缀的过滤器是不需要的。

.background-image {
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 750px;
  
  background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb');
  background-size: cover;
  
  filter: blur(5px);
}

.hero-image {
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 750px;

  background-image: url('https://images.pexels.com/photos/366968/pexels-photo-366968.jpeg?w=1153&h=750&auto=compress&cs=tinysrgb');
  background-size: cover;
  border-radius: 50%;
}

<div class="background-image"></div>
<div class="hero-image"></div>

#1