我正在建立一个网站来练习我的网络开发人员技能,(我仍然是一个初学者,所以请对我很轻松)。无论如何,我添加了一个背景图像,我正在使它响应。我正在使用twitter引导程序和使用媒体查询,一切正常,但是当我减少从595高度x 591宽度开始的Web浏览器窗口时,背景图像开始不覆盖整个窗口。我想知道为什么因为我正在使用媒体查询,正如Twitter引导程序所说,我认为额外的小设备媒体查询涵盖了这一点。
我真的很抱歉我的英语不好,这不是我的第一语言。
如果我没有错,你可以看到我的HTML和CSS源代码我右键单击页面并单击inspect选项,但我将在这里添加代码以防万一:
body {
/* background-color: #000000 */
background-image: url(../images/city_landscape.png);
background-repeat: no-repeat;
}
/********** Large devices only **********/
@media (min-width: 1200px) {
body {
background-size: cover;
}
}
/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
body {
background-size: cover;
}
}
/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
body {
background-size: cover;
}
}
/********** Extra small devices only **********/
@media (max-width: 767px) {
body {
background-size: cover;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cyberangel's site</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-utils.js"></script>
</body>
</html>
之所以发生这种情况,是因为它的内容不够大,因此身体不会拉伸整个屏幕。
要解决此问题,您可以尝试将height: 100vh
添加到您的身体:
body {
height: 100vh;
}
要将图像应用于整个页面,您还需要将body
和html
的高度设置为100:
body, html
{
height: 100%;
}
.background
{
background-image: url("img_girl.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
来自:W3Schools
而不是background-size: cover
你可以使用object-fit: fill;
,它将填满整个屏幕:
@media (max-width: 767px) {
body {
object-fit: fill;
}
}
请记住,这个属性不是很好的Internet Explorer / Edge浏览器supported。
将height: 100vh;
添加到body
标签就可以了。
body {
/* background-color: #000000 */
background-image: url(https://via.placeholder.com/1500x800);
background-repeat: no-repeat;
height: 100vh;
}
/********** Large devices only **********/
@media (min-width: 1200px) {
body {
background-size: cover;
}
}
/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
body {
background-size: cover;
}
}
/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
body {
background-size: cover;
}
}
/********** Extra small devices only **********/
@media (max-width: 767px) {
body {
background-size: cover;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cyberangel's site</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-utils.js"></script>
</body>
</html>
编辑*如果您不喜欢,还能详细说明原因吗?
我还想添加(如果有人想详细说明)你可以使用更容易理解的CSS flexbox和CSS网格,这使得Bootstrap在我看来已经过时,但是有人说它仍然比网格更好,我也只是一个初学者。
我从中学习,因为它很容易理解:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/