Question

我差不多了，但是a-tag内的文字不应该受到半透明叠加层的影响：

无论您是否将鼠标悬停在图像上，文字都应为亮白色。

如果需要，我可以添加更多的html元素，但我希望将其保持在最低限度。

添加了一个新元素：

.tint:before

具有半透明背景：

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

但是“before”元素也位于a-element内部的文本上并使其变暗。

这可以用z-index排序来解决吗？

谢谢！克里斯

Answer 1

通过正确排序元素，可以很容易地解决这个问题修正了下面的代码，注意使用相对定位来允许z-indexing和不同的索引 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;
}

Answer 2

最直接的解决方案是在元素中包含链接的内容并将其应用于背景。

HTML：

<a class="tint t1 block" style="background-image:url(http://cdn.impressivewebs.com/2011-11/greece001.jpg);" href="#">
    <div class="overlay">
        <h2>Themenwoche: Glatt gelogen!</h2>
        <p>Aktueller Beitrag</p>
    </div>
</a>

<a class="tint block" style="background-image:url(http://toxic.fm/site/wp-content/uploads/2014/01/topelement-255x260.jpg)" href="#">
    <div class="overlay">
        <h2>Themenwoche: Glatt gelogen!</h2>
        <p>Aktueller Beitrag</p>
    </div>
</a>

CSS：

body {
    color: #fff;
    font-family:arial;
}

a {
    color:#fff;
}

.block {
    display:block;
    width:250px;
    height:250px;
}

.tint {
    float: left;
    cursor: pointer;
}

.overlay {
    width: 210px;
    height: 210px;
    padding: 20px;
    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;
}

.overlay *:first-child {
    margin-top: 0;
}

.tint:hover .overlay {
    background: none;
}

请参阅this JSFiddle。

在不影响文本的情况下使背景图像变暗

2 个答案: