Question

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

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

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

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

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

Answer 2

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

至少需要一个复选框和一个标签
在标签
该复选框应为display:none
标签应为for={Id of checkbox}
如果标签是复选框后的下一个标签，那么您选中的样式应该类似于：ex。 chx:checked + label {...
如果标签和复选框位于同一级别但不是彼此相邻：ex。 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 3

您遇到的问题是Twitter徽标有白色背景，因此您无法看到它背后的刻度。

仅使用一个img元素也无法在内容之上获取背景图像。你需要引入另一个像div这样的元素：

我减少了勾号的大小，所以你仍然可以看到推特图标在那里

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

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

3 个答案:

演示