css - 选中时不会出现黑色背景

Question

JsFiddle Demo

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;
}

这是一个简短的例子。当单击复选框时，努力使不透明度为 0.85 的黑色背景出现(选中当前事件)，覆盖文本“hihi”。但无法让它工作。不知道为什么 :before 不起作用。

更新的 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;
}

我做了一些与你不同的事情。首先，虽然我对列使用了固有比率，但我使用的技术允许您将图像添加到标记中，而无需将它们作为背景图像。这在两个方面都是有益的。一是您可以获得图像 SEO 的好处，如果这对您很重要的话。第二个是它使您的标记保持美观和干净(不需要内联样式)。这在维护方面很重要。此技术改编自 A List Apart 文章示例 #2 found here .

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

before和after伪元素的应用并没有那么复杂。你只需要记住几件事。首先是你必须有一个内容属性(即使它是空的)。你已经有了。其次是堆叠顺序。使用 z-index 是处理此问题的一种方法，但您也可以依赖 the natural stacking order of elements .在这种情况下，因为前后元素都有定位，它们将出现在没有定位的根元素“上方”，而前元素(自然地)在后元素下方。

最后，这是您的主要问题，您必须确保，由于您使用的是定位，所以定位的元素必须有一个要定位的元素本身。虽然您使用设置为 relative 的 position 属性正确地将根元素设置为具有定位，但该元素没有高度。这是一个折叠的 div。因此，当您将定位元素设置为 block 时，它是 100% 宽度但 0 高度。

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

顺便说一句，如果你对 label感到困惑的话 元素的for 属性，它指向它所绑定(bind)的元素的id。这对于这项技术的工作很重要!在您的示例中，您似乎将复选框的值设置为 kitty，因此我认为您可能假设这就是您在这两个元素之间创建连接的方式。如果您在页面上只有一对复选框/标签可能并不重要，但一旦您添加了几个额外的复选框，这就不会起作用了。

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