卡片不透明度设置应用于卡片主体中的图像答案

【问题标题】：Opacity setting for card applying to image in card-body卡片不透明度设置应用于卡片主体中的图像
【发布时间】：2019-07-30 19:22:27
【问题描述】：

我有一张背景图片覆盖了我正在处理的主页的整个页面，并希望用户能够通过内容看到背景图片。我在页面上有卡片作为列，并将它们设置为 0.8 不透明度。我遇到的问题是这种不透明度也适用于卡体内包含的任何图像。 IE你可以通过它们看到背景图片。

我尝试让<img> 标签的不透明度为 1，使实际图像的不透明度为 1，并将图像放入自己的 <div>，不透明度为 1。我也尝试使用样式属性，但也没有任何乐趣.在 Google 或 Stack Overflow 上找不到任何内容。

// CSS
// Translucent foreground
.card.t-lucent {
    opacity: 0.8;
}

// Home full body background
.home-bg { 
  background: url(img/bg/world-war-ii-60541_1920.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

// Newspaper
.newspaper {
    font-family: 'Belgrano', serif;
}

// HTML
<body class="{{ request()->path() }}-bg">
<div class="card t-lucent newspaper">
            <div class="card-body">
                <h1 class="card-title text-center display-4">
                    Welcome!
                </h1>
                <img class="img rounded float-left mr-3 opq-img" src="{{ asset('img/ww1_soldier_statue.jpg') }}" alt="WW1 soldier statue" />
                <p class="card-text">some text some text some text some text some text some text some text some text some text</p>

                <p class="card-text">some text some text some text some text some text some text some text some text </p>
            </div>
        </div>
</body>

【问题讨论】：

标签： twitter-bootstrap opacity laravel-5.8

【解决方案1】：

我深入研究了 opacity 命令，它会影响包含在父元素中的元素。因此，0.8 的不透明度将适用于该元素的所有子元素。绕过它的方法是使用背景颜色。

即将 CSS 更改为：

// Translucent foreground
.t-lucent {
    background-color: rgba(225, 225, 225, 0.8);
}

【讨论】：