DEMO

Question

HTML

<div class="list current">
<div class="checked current active">
</div>
<input id="hi" type="checkbox" name="id" value="hi" class="box"><label for="hi" style="margin-bottom: 30px; width: 100px; height: 100px" class="name checked">hihi</label>
</div>

CSS

.list input[type="checkbox"]:not(:checked),
.list input[type="checkbox"]:checked {
  visibility: hidden;
}

.list.current .box:checked + .name:after {
  content: " ";
  display: block;
  position: absolute;
  bottom: 72px;
  left: 72px;
  height: 60px;
  width: 60px;
  background: yellow;
  z-index: 3;
}

.checked.current:before{
  content: '';
  display: block;
  opacity: 0;
  background: rgba(0, 0, 0, 0.85);
  transition: opacity .3s;
  z-index: 10;
}

.checked.current.active:before{
  opacity: 1;
}

.name{
  position: relative;
  display: inline-block;
  cursor: pointer;
  float: left;
  text-align: center;
  width: 200px;
}

这是一个简短的例子。当点击复选框，覆盖文本“hihi”时，出现了具有不透明度0.85的背景黑色（检查当前活动）。但是无法让它发挥作用。不确定原因：以前不工作。

Kitten example

更新的HTML / CSS

仍然无法使它与黑色背景一起工作并在黑色背景上打勾。点击时，没有任何反应：（

Answer 1

根据你的两个例子，我认为一些混淆的根源可能只是来自你的css和标记的复杂性。这是cat示例的简化实现：

DEMO

<强> HTML：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-4">
            <div class="ratio-4-3">
                <div class="inner">
                    <input id="kitty" type="checkbox" class="productBox" />
                    <label for="kitty" class="productName">
                        <img src="http://funnyanimalpictures.funnypicturesutopia.com/pics/16/A-Small-Ball-Of-Kitty-Cat.jpg" class="img-responsive" /> 
                    </label>    
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-4">
            <div class="ratio-4-3">
                <div class="inner">
                    <input id="kitty1" type="checkbox" class="productBox" />
                    <label for="kitty1" class="productName">
                        <img src="http://placekitten.com/720/540" class="img-responsive" /> 
                    </label>                   
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-4">
            <div class="ratio-4-3">
                <div class="inner">
                    <input id="kitty3" type="checkbox" class="productBox" />
                    <label for="kitty3" class="productName">
                        <img src="http://placekitten.com/750/750" class="img-responsive" /> 
                    </label>                    
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-4">
            <div class="ratio-4-3">
                <div class="inner">
                    <input id="kitty4" type="checkbox" class="productBox" />
                    <label for="kitty4" class="productName">
                        <img src="http://placekitten.com/700/650" class="img-responsive" /> 
                    </label>                   
                </div>
            </div>
        </div>
    </div>
</div>

<强> CSS：

[class^="col"] {
    padding-bottom: 30px; /*Balance the grid gutters with 30px of padding below the images*/
}
.ratio-4-3 { /*Create the intrinsic wrapper*/
    position: relative;
    padding-bottom: 75%;
    height: 0;
}
.inner { /*Create an inner wrap for the content*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow:hidden; /*Hide anything that falls outside the inner wrap*/
}
.productBox {
    position: absolute; /*Take the checkbox out of the document flow*/
    right: 100%;
    visibility: hidden; /*Hide the checkbox*/
}
.productName {
    text-align: center;
    line-height: 70px;
    cursor: pointer;
}
.productName:before {  
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;    
}
.productBox:checked + .productName:before {
    opacity: 1;
}
.productBox:checked + .productName:after {
    content:'✔';
    display: block;
    position: absolute;
    height: 70px;
    width: 70px;
    background: #fff;
    bottom: 0;
    right: 0;
    color: green;
    font-size: 50px;
}

我做了一些不同于你的事情。首先，虽然我使用了列的固有比率，但我使用的技术允许您将图像添加到标记中，而不会将它们作为背景图像。这在两个方面都是有益的。一个是你可以获得图像搜索引擎优化的好处，如果这对你很重要。第二是它保持你的标记干净整洁（不需要内联样式）。这在维护方面很重要。此技术改编自A List Apart文章示例＃2 here 。

至于实现复选框功能，我还调整了标记的顺序，将图像包装在标签内。在我看来，这更具语义性，因为图像是你的标签。这也使得添加before和after伪元素变得非常简单。并且，它简化了您的标记和CSS，这在可维护性方面也是必不可少的。

前后伪元素的应用并不复杂。你只需要记住几件事。首先，您必须拥有内容属性（即使它是空的）。你已经有了。第二是堆叠顺序。使用z-index是处理此问题的一种方法，但您也可以依赖the natural stacking order of elements。在这种情况下，因为前后元素都有定位，所以它们将出现在＆＃34;以上＆＃34;没有定位的根元素，before元素（自然地）在after元素下面。

最后， 这是你的主要问题 ，你必须确保因为你正在使用定位，所以定位的元素必须有一个元素来定位本身。在使用position属性设置为relative时正确设置根元素以进行定位时，该元素没有高度。这是一个崩溃的div。因此，当您将定位元素设置为块时，它的宽度为100％但高度为0。

在演示的情况下，label元素从其包含的图像中获取其高度。因此，当您为.productName:before将top / left / right / bottom属性设置为0时，它将完全覆盖图像。

顺便说一下，如果您对 label 元素属性感到困惑，则会指向 id 它所绑定的元素。这对于这项技术来说非常重要！在您的示例中，您似乎在kitty的复选框上设置了值，因此我认为您可能假设这是在这两个元素之间创建连接的方式。如果您在页面上只有一个复选框/标签对可能无关紧要，那么一旦您添加了几个额外的复选框，它就不会起作用。

希望这个解释有所帮助，而且它不是TL; DR。

签入激活时不会出现黑色背景

1 个答案:

DEMO