基于bootstrap的背景图自适应屏幕大小的页面

最新推荐文章于 2024-08-29 15:33:15 发布

静梵

最新推荐文章于 2024-08-29 15:33:15 发布

阅读量1.1k

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_39293537/article/details/113335366

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>详情</title>
		<script type="text/javascript" src="../js/jquery.js"></script>
			<script src="../js/bootstrap.min.js"></script>
		    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
			<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
			<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
			<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
		
	</head>
	<body>
		<div id="mainDiv"></div>
		<div id="backbutton">
			<a class="btn btn-danger dropdown-toggle" style="margin: 10px;" a href="#">
				 <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"> 返回
			</a>
		</div>
		<div id="content">
			建设中。。。
		</div>
	</body>
</html>
<style type="text/css">
	body,html {
		width: 100%;
		height: 100%;
	}
	#mainDiv {
		width: 100%;
		height: 100%;
		background: url(../img/back_img.png) no-repeat;
		background-size: 100% 100%;
		z-index: -1;
		position:absolute;
		/* text-align: center; */
		display: flex;
		/* align-items: center;        /* 垂直居中 */ */
		justify-content: center;    /* 水平居中 */
	}
	#backbutton{
		position: absolute;
	}
	#content {
		width: 100%;
		height: 100%;
		text-align: center;
		line-height: 700px;
		color: white;
		font-size: 45px;
		z-index: 1;
	}
  #box::-webkit-scrollbar {
   width: 0px;
  } 
</style>