Question

我有一个全屏幕背景图片，它保持宽高比，适用于所有浏览器，但不适用于Safari。我擅长CSS，但此时我并不确切知道问题是什么。似乎Safari在保持垂直中心方面存在问题，并在顶部和底部产生间隙：

<div id="bg">
    <div style="display: table-cell">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="loading"><img src="images/home.jpg" /></td>
            </tr>
        </table>
    </div>
</div>

CSS：

html,body,#bg,#bg table,#bg td {
    width:100%;
    height:100%;
    overflow:hidden;
    position: relative
    }

#bg div{
    position:absolute;
    width:200%;
    height:200%;
    top:-50%;
    left:-50%
    }

#bg td{
    vertical-align:middle;
    text-align:center
    }

#bg img{
    min-height:50%;
    min-width:50%;
    margin:0 auto;
    display: table
    }

这里有任何CSS cr 黑客攻击吗？

Answer 1

如果您希望在CSS中使用实际图像作为背景而不是背景图像，JavaScript解决方案可能更适合您的需求，因为它不会在您的设计中引入额外的标记。

查看jQueryMaxImage：http://www.aaronvanderzwan.com/maximage/，这是我写的一个，jquery.FullScreenBG：https://github.com/huntedsnark/jquery.fullScreenBG

如果您不想使用脚本，可以使用CSS＃和非标准CSS来实现兼容性：

html {
    background: url(images/yourImage.jpg) no-repeat center center fixed;

    /* CSS3 */
    background-size: cover;

    /*other browser specific */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    /* non-standard for IE */
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.yourImage.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='yourImage.jpg', sizingMethod='scale')"
}

为了背景图像，你真的不应该添加各种表格标记。

Safari CSS问题/背景图片

1 个答案: