如何在底部突出显示文字？

Question

我有这个网站：

link

代码HTML：

<div class="col-md-4 tab-bottom">
                    <div class="tab-bottom-img"><img width="380" height="380" src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/2-380x380.png" class="attachment-news wp-post-image" alt="2"> </div>
                        <div class="tab-bottom-content" style="display: block;">
                            <div>
                            <p class="title_bottom">SED PERSPICIATIS</p>
                            <p class="content_bottom"></p><p>Sed ut perspiciatis unde omnis iste natus error sit<br>
voluptatem accusantium doloremque laudantium,<br>
totam rem aperiam, eaque ipsa quae ab illo inventore<br>
veritatis et quasi architecto beatae vitae dicta sunt<br>
explicabo.</p>
<p></p>
                            </div>
                        </div>
                </div>

CODE CSS：

.tab-bottom {
  position: relative;
  height: 400px;
}
.tab-bottom-img {
  width: 100%;
  position: absolute;
  top: 50%;
  height: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tab-bottom-img img{
  width:100%;
  height: 100%;
  /* opacity: 0.5; */
}
.tab-bottom:hover{
  opacity: 0.5;
}

不幸的是，字体看不太清楚......我想在下面的图片中表示..

使用的字体是：Archivo Narrow / Bold用于标题

你能告诉我如何解决这个问题吗？ 它来自哪里？

提前致谢！

Answer 1

将此代码添加到CSS：

10

因此在文本区域内，字体是全彩色和实色的，而不是半透明的。

您可能还想改进这一部分：

.title_bottom, .content_bottom {
    opacity: 1.0;
}

因为该类仅应用于第一个空的段落。

Answer 2

您需要为特定部门内的内容设置完全不透明度。试试这个

.content_bottom , .title_bottom{
    opacity: 1.0;
    color:red; //the code for the color you have used in the title
}