Question

我有以下代码

＆＃13;

.about-img-top {
  padding-top: 39px;
  padding-left: 95px;
}

.about-img {
  padding-top: 39px;
  padding-left: 30px;
}

.Rectangle-2-Copy {
  width: 526px;
  height: 248px;
  background-color: #f4f4f4;
  z-index: -1;
  bottom: 0;
  position: absolute;
  margin-left: 64px;
}

＆＃13;

<div class="col-md-7">
  <img src="https://cdn.zeplin.io/588714a1f51baed2b98908bc/assets/C2477822-CF77-4CC3-966D-37305572AC79.png" class="about-img-top img-responsive " alt="payment_gateway_company">
  <div class="Rectangle-2-Copy">
  </div>
</div>

＆＃13;

这很好用，我不得不在其中添加一个带有css属性的空div。

但是我可以不使用空div而这样做吗？通过在图像上添加几个CSS来实现吗？

这就是我试过的

https://jsfiddle.net/74s293wt/

我是HTML / CSS新手，我尝试了几次谷歌搜索，但没有帮助。

Answer 1

如果您不想使用空:before，则可以使用:after或div插入内容。试试这个：

.about-img-top {
  padding-top: 39px;
  padding-left: 95px;
}

.col-md-7:before {
  content: '';
  width: 526px;
  height: 248px;
  background-color: #c00;
  z-index: -1;
  bottom: 0;
  position: absolute;
  margin-left: 64px;
}

<div class="col-md-7">
  <img src="https://cdn.zeplin.io/588714a1f51baed2b98908bc/assets/C2477822-CF77-4CC3-966D-37305572AC79.png" class="about-img-top img-responsive " alt="payment_gateway_company">
</div>

使用伪选择器

1 个答案: