html - 在 CSS 中突出显示图像上的文本

Question

我在图片上有一些文字，但问题是我使用了不透明度，这样文字会突出显示，但它会使图片看起来很暗淡。

这是更新 Fiddle Link

HTML

    <div class="subcontainer"> 
           <a href="http://tinypic.com?ref=11kbnlf" class="imgcolumn" target="_blank"><img src="http://i58.tinypic.com/11kbnlf.png"  alt=""></a>
         <h3 class="header3">Motivate Yourself</h3>

    </div>

CSS

 .subcontainer {
     width: 100%;
     height: 100%;
     float: left;
     position: relative;
     border: 3px solid white;
 }
 .imgcolumn {
     background-repeat: no-repeat;
     float: left;
     width: 60%;
     height: 80%;
     margin-left: 130px;
     margin-top: 45px;
     position: absolute;
     opacity: 0.4;
     filter: alpha(opacity=40);
 }
 .header3 {
     z-index: 100;
     position: absolute;
     float:right;
     color: black;
     font-size: 25px;
     margin-top: 175px;
     text-align: center;
     margin-left: 170px;
 }

有没有其他方法可以通过保持图像原样突出显示文本。

注意:我正在努力实现这样的目标 PAGE 而且我没有看到图像模糊或不透明。

Answer 1

使用这个fiddle 例如:

.header3 {
     z-index: 100;
     position: absolute;
     float:right;
     color: black;
     font-size: 25px;
     text-align: center;
    position:absolute;
    width:80%;
    height:45%;
    background-color:rgba(0,0,0,0.4);
    top:20px;
    left:24px;
    line-height:150px;

 }