使用伪选择器向图像添加背景形状

Question

我有以下代码

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

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

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

但是我可以不使用空 div 吗？通过向自己的图像添加几个 CSS?

这是我试过的

https://jsfiddle.net/74s293wt/

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

Answer 1

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

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

使用伪选择器向图像添加背景形状

Adding background shape to an image using pseudo selectors

html

css

twitter-bootstrap