变暗背景图像而不影响文本 [英] Darken a background image without affecting the Text

问题描述

我几乎在那里，但a-tag内的文本不应受半透明覆盖影响：

http://jsfiddle.net/ChrisPrefect/GPLfM/

文字应

如果需要，我可以添加更多的html元素，但我想将其保持在最小。 / p>

添加了一个新元素：

  .tint：before 
  

其具有半透明背景：

  background：rgba（0,0,0，0.5）; 
  

但是before元素也在a-元素内部的文本，

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

谢谢！
Chris

解决方案

这可以很容易地解决你的元素z顺序正确。

固定下面的代码，注意使用相对定位来允许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; 
} 
  

I am almost there, but the text inside the a-tag should not be affected by the semi-transparent overlay:

http://jsfiddle.net/ChrisPrefect/GPLfM/

The text should be bright white, regardless if you hover over the image or not.

I can add more html elements if necessary, but I would like to keep it to the minimum.

There is a new element added with:

.tint:before

which has a semi transparent background:

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

But the "before" element is over the text inside the a-element too and makes it dark.

Can this be solved with z-index ordering?

Thank you! Chris

解决方案

This can easily be solved with ordering your elements z-wise correctly.
Fixed code below, note the use of relative positioning to allow z-indexing and different indexes.
Jsfiddle sample: 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;
}

这篇关于变暗背景图像而不影响文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！