gpt4 book ai didi

html - 背景图片在手机上不会全屏显示

转载 作者:太空宇宙 更新时间:2023-11-04 02:00:32 26 4
gpt4 key购买 nike

我正在尝试将图像设置为背景,但它不适合手机:

screenshot

screenshot

有没有另一种方法可以在不更改带有@media 属性的壁纸的情况下实现?

我的 HTML 和 CSS:

    body { 
/* Location of the image */
background-image: url(../img/background.jpg);

/* Background image is centered vertically and horizontally at all times */
background-position: center center;

/* Background image doesn't tile */
background-repeat: no-repeat;

/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;

/* This is what makes the background image rescale based
on the container's size */
background-size: cover;

/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Title of the document</title>
</head>

<body>
<h1>ALOOOU</h1>
</body>

</html>

最佳答案

像这样为移动设备添加视口(viewport)高度:

@media (max-width: 768px) {
body {
height:100vh;
}
}

关于html - 背景图片在手机上不会全屏显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41855331/

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