如果未选中，则为灰色复选框图像的CSS

Question

以下CSS用于将常规复选框元素替换为已选中/未选中图像。

.ckbx {
  display:none;
}
.ckbx + label {
  background:url('https://pixabay.com/static/uploads/photo/2013/07/12/17/40/checkbox-152188_960_720.png') no-repeat;
  background-size: 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display:inline-block;
}
.ckbx:checked + label {
  background:url('https://pixabay.com/static/uploads/photo/2013/07/12/17/40/checkbox-152187_960_720.png') no-repeat;
  background-size: 100%;          
  height: 70px;
  width: 70px;
  padding: 0px;
  display:inline-block;
}

<input type="checkbox" class="ckbx" id="bike">
<label for="bike">I have a bike</label>    

我不需要使用两个图像，而只需要使用一个图像（选中）。

对于未经检查的状态，如何使用CSS 来为图像添加灰色？

Answer 1

使用opacity

＆＃13;

＆＃13;

.ckbx {
  display: none;
}
.ckbx + label {
  background: url('https://pixabay.com/static/uploads/photo/2013/07/12/17/40/checkbox-152188_960_720.png') no-repeat;
  background-size: 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display: inline-block;
  opacity: 0.3;
}
.ckbx:checked + label {
  opacity: 1;
}

＆＃13;

<input type="checkbox" class="ckbx" id="bike">
<label for="bike">I have a bike</label>

＆＃13;

＆＃13;

＆＃13;

或伪

＆＃13;

＆＃13;

.ckbx {
  display: none;
}
.ckbx + label {
  background: url('https://pixabay.com/static/uploads/photo/2013/07/12/17/40/checkbox-152188_960_720.png') no-repeat;
  background-size: 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display: inline-block;
  position: relative;
}
.ckbx + label::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: white;
  opacity: 0.7;
}
.ckbx:checked + label::after {
  opacity: 0;
}

＆＃13;

<input type="checkbox" class="ckbx" id="bike">
<label for="bike">I have a bike</label>

＆＃13;

＆＃13;

＆＃13;

Answer 2

虽然您已经标记了答案，但这里有一个解决方案，它实际上为您的图像应用了灰度，并提供了良好的浏览器支持。

我们将使用 SVG 过滤器：

首先我们定义svg元素：

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
  </filter>
</svg>

之后，它非常简单，您使用CSS filter属性。

.ckbx:checked + label {
  filter: url('#grayscale');
}

为了使它能在FF上工作，你需要像这样使用整个SVG：

.ckbx:checked + label {
   filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
}

代码段：

＆＃13;

＆＃13;

svg {
  display: none;
}
.ckbx {
  display: none;
}
.ckbx + label {
  background: url('http://fillmurray.com/200/200') no-repeat;
  background-size: 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display: inline-block;
}
.ckbx:checked + label {
  background: url('http://fillmurray.com/200/200') no-repeat;
  background-size: 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display: inline-block;
  filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
}

＆＃13;

<input type="checkbox" class="ckbx" id="bike">
<label for="bike">I have a bike</label>


<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
  </filter>
</svg>

＆＃13;

＆＃13;

＆＃13;

如果您想提供进一步的浏览器支持，您可以应用具有不同供应商前缀的相同属性，并使用接受百分比或小数值的greyscale函数。

.ckbx:checked + label {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%); /* Or grayscale(1)*/
  filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
}

代码段：

＆＃13;

＆＃13;

svg {
  display: none;
}
.ckbx {
  display: none;
}
.ckbx + label {
  background: url('http://fillmurray.com/200/200') no-repeat;
  background-size: 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display: inline-block;
}
.ckbx:checked + label {
  background: url('http://fillmurray.com/200/200') no-repeat;
  background-size: 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display: inline-block;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
}

＆＃13;

<input type="checkbox" class="ckbx" id="bike">
<label for="bike">I have a bike</label>


<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="grayscale">
    <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
  </filter>
</svg>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以使用CSS3 greyscale：

.ckbx + label {
  background:url('https://pixabay.com/static/uploads/photo/2013/07/12/17/40/checkbox-152188_960_720.png') no-repeat;
  background-size: 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display:inline-block;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%); 
}
.ckbx:checked + label {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  filter: grayscale(0%); 
}

Answer 4

使用CSS3过滤器可以实现这一点，但在Internet Explorer等旧浏览器中无效，请参阅caniuse.com

.ckbx {
  display:none;
}
.ckbx + label {
 
  background-image: url('https://homepages.cae.wisc.edu/~ece533/images/airplane.png');
  background-size: 100% 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display:inline-block;
  filter: grayscale(100%);
}

.ckbx:checked + label {
  filter: none;
}

<input type="checkbox" class="ckbx" id="bike">
<label for="bike">I have a bike</label>



<input type="checkbox" class="ckbx" id="plane">
<label for="plane">I have a bike</label>