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;

 }

Answer 2

您还可以设置父容器的背景图像，然后在其上面放置另一个元素，使用半透明背景颜色，就像我在这里所做的那样。然后，可以通过覆盖层的背景的不透明度来控制突出显示，而不会影响文本不透明度。

http://jsfiddle.net/xDaevax/8Mzh9/

 .subcontainer {
     border: 3px solid white;
     margin: 0px auto;
     background: url("http://i61.tinypic.com/2ur6rk1.png") no-repeat center top;
     height: 225px;
 }
 .imgcolumn {
     width: 60%;
     display: table;
    height: 100%;
     margin: 0px auto;
     border: solid 1px #000000;
    background-color: rgba(255, 255, 255, .6);
 }
 .header3 {
     color: black;
     font-size: 25px;
     text-align: center;
     position: relative;
    top: -120px;
 }

HTML

<div class="subcontainer">
    <a href="http://tinypic.com?ref=2ur6rk1" target="_blank" class="imgcolumn">&nbsp;</a>

     <h3 class="header3">Motivate Yourself</h3>

</div>

Answer 3

您提供的页面作为示例使用对比色的文本和图像。例如，该页面使用暗图像，其上的文本为纯白色。

如果您希望文本突出，请使用对比色，或者使用对比度投影/外部发光（使用PhotoShop等图像编辑软件制作），或添加如下所示的半透明背景：{{3} }

.header3 {
    z-index: 100;
    position: absolute;
    float:right;
    color: black;
    font-size: 25px;
    margin-top: 175px;
    text-align: center;
    margin-left: 170px;
    background-color: rgba(255, 255, 255, 0.5); /* I added this... */
    padding: 5px; /* ... and this */
}

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

3 个答案: