Question

我正在尝试在同一张图片上显示图像，但模糊不清并作为背景。

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

目前的代码不显示英雄形象。

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

有什么建议吗？

提前致谢。

Answer 1

我不知道，为什么你想position:fixed background1 background2，但是，您可以使用以下显示的方法。

但是如果您尝试将background1嵌套在blur div中，那么background-image过滤器将应用于这两个图像，我认为，您不希望这样。< / p>

<强>点数：

每当使用height时，您需要定义width和browser，否则将无法在position: absolute上看到。
使用relative时，尝试使用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>

maven-dependency-plugin

Answer 2

你忘了定位英雄形象fixed。这样，您可以将其堆叠在背景图像的顶部。使用z-index确保订单。

在下面，我编辑了你的样式以使订单保持一致并首先显示最重要的部分：元素如何定位，在何处，在何种尺寸，然后是背景，然后是其他东西。您现在可以轻松查看两个图像之间的重叠和差异。

请注意，-webkit-的{{1}}前缀版本为not needed。

＆＃13;

filter

＆＃13;

.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%;
}

＆＃13;

在被弄脏的背景图象顶部的显示图象

2 个答案: