Question

所以早些时候，我试图弄清楚如何使用CSS来透明地使图像变暗，但是当我想到这一点时，新问题出现了我将如何在其上放置文本？这就是我到目前为止...... http://jsfiddle.net/PXU6j/3/

 <h1> Any Help Will Be  appreciated </h1>

Answer 1

使用CSS positioning在其他内容上绘制内容（例如文字）。

Answer 2

http://jsfiddle.net/j8592/27/

/* apply a natural box layout model to all elements */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }
.container {
    position: relative;
    display: inline-block;
}
.container img {float: left;}
.foo-background {
    background: rgba(0,0,0,0.5);
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.foo-text {
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    color: #f2f2f2;
    padding: 20px;
}

在黑暗的透明背景顶部的文本

2 个答案: