Question

只是为个人项目编写一点代码，出于某种原因，背景图像一直与我的标题和其他 div 重叠。放入一个虚拟标题以显示，但图像显然应该包含在 div 中，我似乎无法正确理解！非常感谢有关如何将其包含在其中的任何建议。

另外，在旁注中，我希望第一张图像显示 before 悬停，但现在包含图像更令人沮丧。我已经使用下面的方法使图像适合，所以也许与此有关？

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

https://jsfiddle.net/qs5xy967/1/

Answer 1

将“z-index”添加到您的 CSS。这是一种定义哪个 div 位于另一个 div 之上的方法。

Answer 2

伙计，你必须做的是：

添加CSS到容器类，相对于容器类添加位置

.container{
  position: relative;
}

在 .bg:before css 中更新固定为 relative 的位置，并确保距离顶部的边距为 0px

  .bg:before {
  position:absolute;
  content:"";
  z-index:1;
  width: 50%;
  height: 100%;
  top:0px;
  right: 0;
  transition:1s all;
  opacity:0;
  background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
}

.bg1:before{opacity:1;} /*to make the first image display at first*/

The Output/Result (1)

The Output/Result (2)

如何将背景图片包含到 div

2 个答案: