使用CSS3在现有方块中添加半透明方块，不需要额外的DIV

Question

我目前有一个采用CSS设计的simpel DIV方块：

.redBlock {
    background-color: #e00808;
    z-index: 10;
}

这会生成一个简单的红色正方形。

现在我想在中心添加一个较小的半透明方块。总之，我想要这样的事情：

但是没有添加额外的DIV。怎么做（如果可能的话）？

非常感谢

Answer 1

我不确定这是多么实用，但你可以使用：after伪元素。

http://jsfiddle.net/xgez0uaz/

HTML

<div class="test">

</div>

CSS

.test {
    width: 100px;
    height: 100px;
    background: red;
    padding: 10px;
}

.test:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    z-index: 10;
    position: relative;
}

Answer 2

通过你的问题，我仍然没有看到任何困难。

.redblock {width:150px;height:150px;border:5px solid #f00;background:rgba(0,0,0,0.4);}

你得到一个红色的div和中心的透明div。

情景发生变化，你打算用那个方块做什么？