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行以及图像在彩色行顶部的显示方式

Answer 1

试用此代码

彩色行上的图像

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

Answer 2

避免使用内联css。您可以使用透明背景颜色来完成。可以通过更改背景颜色属性的最后数量来调节透明度 -

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

示例摘录

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

试试这个：

＆＃13;

.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) */
}

＆＃13;

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

＆＃13;

Answer 4

以下是您的问题的解决方案。下面我为您的背景颜色添加了2个内联样式

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

Answer 5

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

如果希望该行透明，只需删除内联css部分

请详细说明您想要获得的结果

Answer 6

如果不想更改 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>

Answer 7

z-index属性指定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

在CSS中的背景颜色上显示图像

7 个答案: