HTML – 什么是在CSS上显示大背景图像的好方法

发布时间：2020-12-14 18:37:39 所属栏目：资源来源：网络整理

导读：我向 question询问了一个特定于我的代码的内容,人们真的很有帮助,所以我选择了更成功的答案,即使我没有解决我的问题. 我正试图获得像livingsocial一样的大型CSS背景. 我的图像是1400 x 1050 我目前的分辨率是：1280 X 1024 我的图像不断从底部切断问题(S)：

我向 question询问了一个特定于我的代码的内容,人们真的很有帮助,所以我选择了更成功的答案,即使我没有解决我的问题.

>我正试图获得像livingsocial一样的大型CSS背景.
>我的图像是1400 x 1050
>我目前的分辨率是：1280 X 1024
>我的图像不断从底部切断

问题(S)：
什么是使用CSS显示大图像背景的最佳方式？

>我是否需要在4种不同的分辨率下使用相同的背景图像,然后使用最适合用户使用的当前分辨率的图像(是否有一些脚本)？
>我是否只需要一个使用css进行缩放的大图像
>其他人如何解决这个问题？

我很想知道这样做的最佳方法是什么,以便在上述三个选项中的所有分辨率下都能正常工作.

解决方法

CSS3解决方案
您可以在CSS3中使用background-origin和background-size,但IE8及更低版本不支持它.

PHP解决方案
您可以使用GD2来扩展特定于用户浏览器的图像,此解决方案也将涉及JavaScript.

生活社交方式
他们使用< img />插入图片标记和定位它固定.

<style type="text/css">
#background {
    z-index: -1; /* put it under everything*/
    position: fixed; /* make it stay in the same place,regardless of scrolling */
    top: 0;
    left: 0;
    overflow: hidden; /* clip the image */
    width: 100%; /* fill the full width of browser */
    min-height: 950px; /* show at least this much of the image */
}
#background img {
    width: 100%;
}
</style>

<body>
    <div id="background"><img /></div>
    <div id="content"><!-- Your Content Here --></div>
</body>

Living Social有更多代码应用于他们的< img />标签,但它似乎有点多余,也许是为了更好的跨浏览器支持,我没有在这里显示它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!