Question

您好我已经在以前的问题中搜索并尝试了多种方法但我仍然无法设置背景图像的不透明度而不会影响字体的不透明度。

这是我的HTML：

<main>
    <div class="background">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
            <div class="center">
                <h1>My name</h1>
                <h3>this is my website</h3>
                <hr>
                <button id = "mainButton" type="button" class="btn btn-default btn-lg">Get Started!</button>
            </div>
            </div>
        </div>
    </div>
    </div>
    </main>

这是css：

 .background{
    background-image: url("xxx.jpg");
    width: 100%;
    height:100%;
    position:fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity:0.5;
}

*我试图使用rgba（0,0,0,0.5）;

*我试图为h1设置另一个css规则，或者为文本设置但仍然相同的div。

请有人帮忙吗？

Answer 1

制作如下标记：

<main>
    <div class="background">
    </div>

    <div class="container">
    </div>
</main>

转到main position: relative;

提供给背景div position: absolute;

修复其余部分。你已经完成了。

关于背景尺寸

您可以按background-size修改图片背景尺寸，并使用cover，contain，100%，100% 100%等值。

如果要覆盖所有页面，请使用值100vh，表示视口高度的100％。

不透明度为背景，而不是字体

1 个答案: