gpt4 book ai didi

html - 移动设备上的图像背景(固定、居中)问题

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

我的网站上有图片背景:

body {
background-image:url('tlo.jpg');
background-color:#000000;
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center center;
background-size: auto auto;
(...)
}

在PC上没有任何问题,但是垂直屏幕的移动设备呈现背景的方式并不完全相同:移动浏览器似乎水平适合背景,所以垂直它只覆盖了一小块网站。我尝试通过为 background-size 属性使用不同的值来修复它,但它没有用。

我的 CSS + HTML:

body {
background-image:url('tlo.jpg');
background-color:#000000;
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center center;
background-size: auto auto;
margin-left: 0;
margin-right: 0;
}

#overall {
margin-left: 0;
margin-right: 0;
width: 100%;
height: 100%;
}

#logo {
position:absolute;
left:0;
top:0;
}

#content {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100%;
height: 300px;
background-color:rgba(255,255,255,0.5);
text-align: center;
}

<body>
<div id="overall">
<div id="logo"><img src="logo.png" width="654" height="150"></div>
<div id="content"><a href="#"><img src="cont.png" border="0"></a></div>
</div>
</body>

最佳答案

这是我想出的解决方案。它在横向和纵向屏幕上都能完美运行。

background: url(bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

关于html - 移动设备上的图像背景(固定、居中)问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23753677/

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