时间戳

首页 > 解决方案 > 如何在透明 div 中制作非透明元素

html - 如何在透明 div 中制作非透明元素

问题描述

我有一个引导轮播，它在每个轮播项目中添加内联图像，并且这个背景图像需要是 0.4 的不透明度。但是这个轮播项目的标题需要是 1 不透明度。有什么办法我可以做到这一点？

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">

            <!-- Slide One - Set the background image for this slide in the line below -->
            <div class="carousel-item active" style="background-image: url('img/banner.jpg')">
                <div class="carousel-caption d-none d-md-block">
                    <h2 class="display-4">First Slide</h2>
                    <p class="lead">This is a description for the first slide.</p>
                </div>
            </div>

        </div>
    </div>

标签： htmlcssbootstrap-4

解决方案

Opacity 的默认初始值为 1。Opacity 不是继承的，而是因为父级具有适用于其中所有内容的不透明度。如果没有一些技巧，您不能使子元素的透明度低于父元素

子元素不会保留为子元素，只需更改它在您的 html 代码中的位置，然后在前一个子元素上添加 css 属性：

.child {
    position : relative;
    top : 5rem;
}
.parent {
    opacity : 0;
}

我希望这会有用

推荐阅读