将产品图像显示为单选框/复选框，并在选中时显示刻度线

Question

我想在<img> 属性上添加背景图像。我想显示 twitter 图像的刻度图像中心。但是，此处不显示刻度图像或背景图像。

img{
  background-image:url(https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg);
  background-repeat:no-repeat;
  background-size:20%;
  background-position:center center;
}

<img src="https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png"  />

Answer 1

如果您需要自定义复选框，请确保以下内容：

• 至少需要一个复选框和一个标签
• 在标签前放置复选框
• 复选框应该有display:none
• 标签应该有for={Id of checkbox}
• 如果标签是复选框之后的下一个东西，那么您选中的样式应该类似于：ex。 chx:checked + label {...
• 如果标签和复选框在同一级别但不相邻：例如。 chx:checked ~ label {...
• 这是最常见的两种布局，但不是唯一的。

演示

.chx {
  display: none
}

.label {
  display: block;
  background-image: url(https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: relative;
}

img {
  display: none
}

.chx:checked+.label img {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 50%;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
}

<input id='chx' class='chx' type='checkbox'>


<label class='label' for='chx'><img src='https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg' width='50'></label>

Answer 2

您使用的推特图片的中心是白色。

背景图像将仅显示图像中透明的区域。

您需要编辑图像以将这些像素更改为透明。

Answer 3

您遇到的问题是 Twitter 徽标的背景为白色，因此您看不到它背后的勾号。

仅使用一个 img 元素来获取内容顶部的背景图像也是不可能的。您需要像这样引入另一个元素，例如 div：

我已经减小了刻度的大小，所以你仍然可以看到 twitter 图标在那里

.test {
  display: inline-block;
  position: relative;
}

.test:after {
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center center;
  background-image: url('https://www.colourbox.com/preview/2692824-green-check-mark-symbol-over-white-background.jpg');
}

<div class="test">
  <img src="https://hakin9.org/wp-content/uploads/2014/02/twitter-150x150.png" />
</div>