问4图像不透明但不显示文本
EN

Stack Overflow用户

提问于 2018-06-23 14:14:06

回答 1查看 4K关注 0票数 7

我只想给背景图像在我的巨型加速器的不透明度为0.5。问题是，我的巨型加速器中的文本也有一个0.5的不透明度。我如何才能得到背景，只有不透明，而不是文本？

以下是自定义的css文件：

.jumbotron{
opacity: 0.5;
background-image: url("../img/colorful_planke.jpg");
background-size: cover;
}

.jumbo_text {
    color: white;
}

这是巨无霸html

<div class="jumbotron jumbo_text">
    <h1 class="display-4 font-weight-bold text-center">Lorum Ipsom</h1><br>
    <p class="lead text-center font-weight-bold">Lorum Ipsom | Lorum Ipsom | Lorum Ipsom | Lorum Ipsom |
        Lorum Ipsom</p>
</div>

css

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-23 14:23:48

当您在图像上设置一个坚实的颜色梯度(具有不透明度)时，您可以对linear-gradient做一个小技巧。

.jumbotron{
  opacity: 0.5;
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg");
  background-size: cover;
}

.jumbo_text {
  color: white;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="jumbotron jumbo_text">
    <h1 class="display-4 font-weight-bold text-center">Lorum Ipsom</h1><br>
    <p class="lead text-center font-weight-bold">Lorum Ipsom | Lorum Ipsom | Lorum Ipsom | Lorum Ipsom |
        Lorum Ipsom</p>
</div>

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51002011

复制

相似问题

问4图像不透明但不显示文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问4图像不透明但不显示文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问4图像不透明但不显示文本
EN