【问题标题】:HTML/CSS Background image doesn't scale in SafariHTML/CSS 背景图像在 Safari 中无法缩放
【发布时间】:2016-03-28 01:21:00
【问题描述】:

我在 Safari(尤其是 iPhone)中的背景图像缩放时遇到问题。

这是它在 iPhone 上的外观:

它应该是这样的(至少):

这是 CSS 代码:

#home {
background-color: rgba(0,0,0, .5);
background-image: url(../img/header-bg.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
position: relative;
text-align: center;}

img {
vertical-align: middle;
max-width: 100%;
height: auto; }

我忘了提到“家”是<section> 标签的“id”。我们的想法是为此“#home”<section> 使用图像背景。

【问题讨论】:

    标签: html css image safari scaling


    【解决方案1】:

    我没有 safari,试试看:

    #home {
        height: 500px;
        background-color: rgba(0,0,0, .5);
        background-image: url(../img/header-bg.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-attachment: fixed;
        position: relative;
        text-align: center;
    }
    

    【讨论】:

    • 对不起,但这在使用 Safari 时并没有改变任何东西。另一方面,这是它在调整大小的 Chrome 上的外观:s12.postimg.org/73kg90xm5/Untitled.png
    • 您的“test.php”链接工作正常,但我忘了提到“home”是
      标签的“id”。我们的想法是为此“#home”
      使用图像背景。如果我将此代码用于我的
      图像在 Safari 中显示为灰色。
    猜你喜欢
    • 2015-09-17
    • 2015-05-06
    • 2011-10-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-05-09
    • 1970-01-01
    相关资源
    最近更新 更多