gpt4 book ai didi

jquery - Bootstrap- 带有内容覆盖的背景图像

转载 作者:太空宇宙 更新时间:2023-11-03 21:24:51 25 4
gpt4 key购买 nike

我想使用背景图片,并将页面的所有内容放在图片上方的白色背景上。

我试过了

.body {
background: url('background.jpg');
background-size: cover;
}

html{
/* This image will be displayed fullscreen */
background:url('background.jpg') no-repeat center center;

min-height:100%;
background-size:cover;
}

但它们都不起作用。第一个没有任何变化,第二个我可以在屏幕底部看到一小条图像。

这是我精简过的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="pics/icon.ico">

<title>News</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/styles.css" rel="stylesheet">

<link href="carousel.css" rel="stylesheet">
</head>
<body id="news">
<nav class="navbar navbar-inverse navbar-static-top">
<!---navbar content-->
</nav>


<div class="container" style="background:white;">

<div class="row row-offcanvas row-offcanvas-right">

<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>headline</h1>
<p>subheadline</p>
</div>
<div class="row">
<!--content snipped-->
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
</div><!--/row-->

<hr>

<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>&copy; 2015 </p>
</footer>

</div><!--/.container-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="offcanvas.js"></script>

</body>
</html>

最佳答案

风格的改变

body {
background: url('background.jpg');
background-size: cover;
}

和html

 <div class="container" style="background:transparent;">

关于jquery - Bootstrap- 带有内容覆盖的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33887725/

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