gpt4 book ai didi

html - 我无法在超大屏幕图像上放置彩色叠加层

转载 作者:太空宇宙 更新时间:2023-11-04 01:28:23 25 4
gpt4 key购买 nike

原始 Bootstrap css 不断覆盖我的自定义 css,我无法放置带有覆盖层或类似内容的图像。这是非常简单的代码:

CSS 和 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>

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

最佳答案

看起来您正在尝试使用 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放在.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;
}

关于html - 我无法在超大屏幕图像上放置彩色叠加层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47577849/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com