Question

原始bootstrap css一直覆盖我的自定义css，我无法将图像覆盖覆盖或类似的东西。这是非常简单的代码：

CSS＆amp; HTML

.jumbotron {
    background: url(../img/img_nature.jpg);
    background-color: rgba(255, 132, 230, 0.85);
    background-size: cover;
}

<!doctype html>
<html lang="en">

<head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
    crossorigin="anonymous">
    <!-- CUSTOM CSS     -->
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    
</head>

<body>

    <div class="jumbotron">
            <h1 class="display-3">Hello, world!</h1>
            <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <hr class="my-4">
            <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
            <p class="lead">
                <a class="btn btn-secondary btn-lg" href="#" role="button">Learn more</a>
            </p>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
        crossorigin="anonymous"></script>
</body>

</html>

我知道这是一个非常简单的问题，但我已经尝试了很多在线视频和教程，并使用原始引导页面中的干净代码。

Answer 1

如果我理解你想要什么，你可以尝试添加：！重要。

例如：

background-color：rgba（255,132,230,0.85）！important;

Answer 2

您似乎正在尝试使用CSS将背景颜色放在同一元素的背景图像前面。

事情是，背景图像出现在背景颜色的前面。

由于你的评论，理想的解决方案是在代码中放入2个新的div，使jumbotron相对，并使叠加div绝对。

<div class="jumbotron">
    <div class="overlay"></div>
    <div class="inner">
        <h1 class="display-3">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <p class="lead">
            <a class="btn btn-secondary btn-lg" href="#" role="button">Learn more</a>
        </p>
    </div>
</div>

然后将叠加层放在.overlay上，并将.inner移到前面。

.jumbotron {
    position: relative;
    background: url(../img/img_nature.jpg);
    background-size: cover;
}

.jumbotron > .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 132, 230, 0.85);
    z-index: 1;
}

.jumbotron > .inner {
    position: relative;
    z-index: 2;
}

我无法在彩色图像顶部放置彩色叠加层

2 个答案: