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

前端之家收集整理的这篇文章主要介绍了HTML – 什么是在CSS上显示大背景图像的好方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我向 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 />标签,但它似乎有点多余,也许是为了更好的跨浏览器支持,我没有在这里显示它.

原文链接:https://www.f2er.com/html/225739.html

猜你在找的HTML相关文章