html - 在图像前显示 'SALE' 标签

Question

我想在图像前显示一个“SALE”标签，我尝试使用“before”伪元素来做到这一点，但屏幕上似乎没有显示任何内容。

我正在尝试在黑色背景的圆圈内创建“SALE”标签。

下面是我用过的代码

<span class"bag-image">
  <img src="https://images-na.ssl-images- 
amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</span>

.bag-image::before{

background-color: #red;
content: 'SALE';
border-radius: 500px;
display: inline-block;
width: 100px;
height: 100px;

}

视觉引用:

LIKE THIS

https://codepen.io/anon/pen/rgLPdp

Answer 1

1. 创建 bag-image 类 position: relative;
2. 制作 bag-image:before position: absolute; 并将其定位在顶部/左侧或边距位置，并将行高设置为 SALE 文本垂直居中。

你可以给伪类一个较低的z-index，这样只有上半部分是可见的，例如z-index: -1;

你可以使用 margin-top: -2.5em; margin-left: 175px; 在伪代码中定位它。

div.bag-image {
  display: inline-block;

  /* just so that we  can see in the example */
  margin-top: 3em;   
}

div.bag-image:before {
  position: absolute;
  background-color: #ff0000;
  content: 'SALE';
  text-align: center;
  color: #ffffff;
  margin-top: -2.5em;
  margin-left: 175px;

  /* optionally make it a circle */
  border-radius: 9999px;
  height: 3em;
  padding: 1em;
  line-height: 3em;
}

/* just for clarity */
img.image {
  border: 1px solid #ccc;
}

<div class="bag-image">
  <img src="https://images-na.ssl-images-amazon.com/images/I/71lDa7EbWSL._UY395_.jpg" class="image">
</div>