html - 使背景图像变暗而不影响文本

我就快到了，但是a-tag中的文本不应该受到半透明覆盖的影响：
http://jsfiddle.net/ChrisPrefect/GPLfM/
无论您是否将鼠标悬停在图像上，文本都应为亮白色。
如果需要的话，我可以添加更多的html元素，但是我希望将其保持在最小值。
添加了一个新元素：

.tint:before

有半透明背景：

background: rgba(0,0,0, 0.5);

但“before”元素也在a元素内的文本上方，使其变暗。
这可以用z-索引排序来解决吗？
谢谢您！
克里斯

最佳答案

这可以很容易地通过对元素的z-wise正确排序来解决。
固定代码下面，注意使用相对定位，允许Z索引和不同索引。
jsfiddle示例：http://jsfiddle.net/L8hM9/

body {
    color: #fff;
    font-family:arial;
}
a {
    color:#fff;
    position: relative;
}
.block {
    display:block;
    width:250px;
    height:250px;
}


.tint {
    z-index: 2;
    position: relative;
    float: left;
    cursor: pointer;
}
.tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0, 0.5);
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    z-index:3
}
.tint:hover:before {
    background: none;
}
.tint h2, .tint p {
    position: relative;
    z-index: 4;
}