在CSS中显示图片在背景颜色上方

Question

我正在使用 Bootstrap，并具有类似于以下布局：

<div class="container stamp">
    <div class="row">
          Some header text
    </div>
    <div class="row" style="background-color:black">
          More header text here
    </div>
    <div class="row">
          More text
    </div>
</div>

我已经设置了覆盖所有三行的背景图片

.stamp {
  background-image: url('img/hugestamp.gif');
  background-repeat: no-repeat; 
  background-position: left top;
}

如何使图像显示在第二行的背景颜色之上？

hugestamp.gif 跨越了所有三行，但第二行具有黑色背景颜色，因此部分图像被切断。我该如何使图像显示在第二行的背景颜色之上（也许使用 z-index ）？

编辑：我无法使彩色行透明。我正在尝试实现以下样式：

在图片中，您可以看到3行以及图像如何显示在彩色行的上方。

- DotnetDude

---

移除内联样式 background-color: black。你不能让 div 内部的内联样式覆盖背景；而且为什么要这样做呢？ - Nathaniel Flick

不进行一些背景位置的调整是不可能实现的。请参见下面的解决方案。 - Wassim Gr

你能否接受正确的答案？ - Wassim Gr

@DotnetDude 你打算改变你的HTML布局吗？还是只用CSS来实现？ - Yogesh Mistry

Answer 1

试试这段代码

Image over colored row

.stamp {
    background-image: url('http://imgh.us/new-google-logo-knockoff.png');
    background-repeat: no-repeat;
    background-position: 0 -69px;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.container{
  position:relative
}

<div class="container">
    <div class="row">
          Some header text
    </div>
    <div class="row" style="background-color:black">
           More header text here
    </div>
    <div class="row">
          More text
    </div>
    <div class="stamp"></div>
</div>

在带有文本的彩色行上方放置图片

.stamp {
    background-image: url('http://imgh.us/new-google-logo-knockoff.png');
    background-repeat: no-repeat;
    background-position: 0 -69px;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
}
.container{
  position:relative
}
.row:nth-child(2):after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: -20;
}
.row:nth-child(2) {
    position: relative;
    z-index: 10;
    color: #fff;
}

<div class="container">
    <div class="row">
          Some header text
    </div>
    <div class="row">
           More header text here
    </div>
    <div class="row">
          More text
    </div>
    <div class="stamp"></div>
</div>

在有色行上方并在文本下方的图像

.stamp {
    background-image: url('http://imgh.us/new-google-logo-knockoff.png');
    background-repeat: no-repeat;
    background-position: 0 -69px;
    background-size: 100% auto;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
}
.container{
  position:relative
}
.row:nth-child(2):after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: -20;
}
.row:nth-child(2) {
    position: relative;
    color: #fff;
}

<div class="container">
    <div class="row">
          Some header text
    </div>
    <div class="row">
           More header text here
    </div>
    <div class="row">
          More text
    </div>
    <div class="stamp"></div>
</div>

- Amal

---

请查看编辑以获取更多关于我试图实现的细节。 - DotnetDude

Answer 2

试试这个：

.container {
  background: #EBEBEB;
  padding: 10px;
}
.row {
  background: white;
  min-height: 100px;
  background-image: url(http://www.clker.com/cliparts/T/j/X/6/y/m/grey-approved-stamp-hi.png);
  background-position: left top;
  background-repeat: no-repeat;
  margin-bottom: 20px;
  padding: 10px;
}

#top {
  padding: 10px;
}

#second {
  background-position: left calc(-180px + 20px + 20px); 
  /* left (-image height + middle row height + paddings) */
}

#third {
  background-position: left calc(-180px - 30px); 
  /* left (-image height + middle row height + paddings) */
}

<div class="container stamp">
    <div id = "first" class="row">
          Some header text
    </div>
    <div id = "second" class="row" style="background-color:#3d3d3d; color: white; min-height: 50px;margin-bottom:0px;">
          More header text here
    </div>
    <div id = "third" class="row">
          More text
    </div>
</div>

- Wassim Gr

---

我想要图片在有颜色的行的顶部。请看我想要实现的设计样例。 - DotnetDude

Answer 3

避免使用内联 CSS。通过使用透明的背景颜色可以实现此目的。 透明度可以通过更改 background-color 属性的最后一个数字来调节--

background-color: rgba(255, 0, 0, *0.4*);

示例代码片段

.stamp {
  background-image: url('https://www.w3schools.com/css/trolltunga.jpg');
  background-repeat: no-repeat; 
  background-position: left top;
}
#blck {
background-color: rgba(0, 0, 0, 0.4);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container stamp">
  <div class="row">
    Some header text
  </div>
  <div id="blck" class="row">
    More header text here
  </div>
  <div class="row">
    More text
  </div>
</div>

- neophyte

---

我无法使用透明选项。请查看编辑。 - DotnetDude

Answer 4

如果想要文字在图像上方，背景颜色在下方，那么这是不可能的，因为它是一个单一组件。

如果想要该行透明，请删除内联CSS部分。

请进一步解释您想要获得的结果。

- M.Rasheed

Answer 5

如果您不想更改HTML布局，而只是通过修改css来实现此目的，那么您可以将背景图像设置为伪元素:before的.stamp。

.stamp:before {
    content: "";
    position: absolute;
    background-image: url(http://placehold.it/300);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

<div class="container stamp">
    <div class="row">
          Some header text
    </div>
    <div class="row" style="background-color:black">
          More header text here
    </div>
    <div class="row">
          More text
    </div>
</div>

- Yogesh Mistry

Answer 6

z-index属性指定了元素的堆叠顺序。具有更高堆叠顺序的元素始终在具有较低堆叠顺序的元素前面。注意：z-index仅适用于已定位的元素（position:absolute、position:relative或position:fixed）。

- Stefan Shiloh

Answer 7

这里有一个解决方案。我已经添加了两个内联样式到你的背景颜色。

<div class="container stamp">
<div class="row">
      Some header text
</div>
<div class="row" style="background-color:black;z-index: -1;position: relative;">
      More header text here
</div>
<div class="row">
      More text
</div>

- J. Shabu