gpt4 book ai didi

android - Css 背景图像无法在移动设备上正确显示

转载 作者:行者123 更新时间:2023-11-28 06:51:12 25 4
gpt4 key购买 nike

.header {
background: #15181f url(images/bg-header.jpg) repeat;
color: #fff;
}
.footer {
background: #15181f url(images/bg-footer.jpg) repeat;
color: #fff;
}

大家好,

我的页眉和页脚背景图片无法在 Android 或 iPhone 等移动设备上正确显示,iPad 也是如此,页眉和页脚的背景图片无法正确显示,导致背景图片被裁剪。

我尝试了 javascript 和 css,以及一种接一种的技术,但都无济于事。在我的 WordPress website 上,这些样式中的一种或另一种都不适用www.awebdesign.co.uk,我不知道我的移动网站有什么用了。我尝试了 overflow-x: hidden; 但不想做任何事情。

尝试了下面这些样式

.header {
width:100%;
float:left;
height:100%;
display:block;
position:relative;
margin: 0 auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}

我也厌倦了页脚的以下内容,但后来删除了它,因为它没有做任何好事:

footer.footer {
width:100%;
float:left;
height:100%;
display:block;
position:relative;
margin: 0 auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}

比起我实现媒体查询,

@media only screen and (max-device-width : 480px)
@media only screen and (max-width: 768px)
@media only screen and (max-width: 1024px

后来改成了这样,

@media screen and (max-width: 480px) 
@media screen and (min-width: 768px) and (max-width: 979px)
@media screen and (min-width: 981px) and (max-width: 1024px)

但是,它只显示左侧背景图像的起始位置。它无法在水平线上正确显示,而是垂直显示而不是水平显示。请帮助我找到解决此问题的方法,从而学习如何将 CSS 背景图像属性应用于移动设备和平板电脑(纵向或横向)。

我想我的问题很清楚,但如果您有任何问题,请随时提出,我希望其他人也觉得这有帮助。提前致谢!

我删除了上面的 CSS 代码以清除我的自定义样式、文档结构、HTML5 页面和类现在看起来像这样:

<!doctype html>
<html>
<body>
<header class="header">
<div class="container">
<div class="panel_1"></div>
</div>
</header>

<section class="middle">
<div class="container">
<div class="full_width"></div>
</div>

<div class="clear"></div>
</section><!-- .middle -->
<footer class="footer">
<div class="container">
<div class="footer-nav">
</div>
</div>
</footer>
</body>
</html>

.container {
width: 940px;
margin: 0 auto;
}
.container:after {
content: "";
display: table;
clear: both;
}
.panel_1 {background:url(images/panel_0.jpg) left top no-repeat;
width: 940px;
height: 270px; /*border: 1px solid #09F;*/}

section.middle {background: #CCC; clear: both;}

.header {
background: #15181f url(images/bg-header.jpg) repeat;
color: #fff;
}
footer.footer {
background: #15181f url(images/bg-footer.jpg) repeat;
color: #fff;
}
footer.footer {padding: 36px 0; clear: both;}
.footer-nav {float: left;}

最佳答案

我认为您混淆了值 covercontain

包含将使您的图像与视口(viewport)的宽度对齐,并且在它们到达它们所在元素的底部之前不会将它们放大。

希望这对您有所帮助。 =)

关于android - Css 背景图像无法在移动设备上正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33756646/

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