当前位置：文江博客话题详情

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

发布于 2024-11-29 21:33:43 字数 618 浏览 0 评论 0原文

我问了一个关于此的问题针对我的代码，人们确实很有帮助，所以我选择了更成功的答案，即使我没有解决我的问题。

我试图获得一个大的 css 背景，就像 livingsocial 那样。
我的图像尺寸为 1400 x 1050
我当前的分辨率是：1280 X 1024
我的图像总是从底部被切断

问题：使用 css 显示大图像背景的最佳方法是什么？

我是否需要有 4 种不同分辨率的相同背景图像，然后使用最适合用户当前使用的分辨率的图像（是否有一些脚本）？
我是否只需要一张使用 css 不断缩放的大图像，
其他人是如何解决这个问题的？

我有兴趣知道执行此操作的最佳方法是什么，以便它在上述三个选项的所有分辨率下都能正常工作。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空气里的味道 2024-12-06 21:33:43

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

PHP解决方案
您可以使用 GD2 来缩放特定于用户浏览器的图像，此解决方案还涉及 JavaScript。

社交生活方式
他们插入带有标签的图像并将其定位固定。

<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 在其标记上应用了更多代码，但似乎有点多余，也许是为了更好的跨浏览器支持，我没有在此处显示。

CSS3 Solution
You could use background-origin and background-size in CSS3, but it's not supported by IE8 and lower.

PHP Solution
You could GD2 to scale the image specific to the users browser, this solution would also involve JavaScript.

Living Social Way
They're inserting an image with the <img/> tag and positioning it fixed.

<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 has some more code applied to their <img/> tag, but it seems sort of redundant, perhaps it's for better cross-browser support, I didn't show it here.

回复收藏 0 原文

高冷爸爸 2024-12-06 21:33:43

我不知道有哪种 CSS 方法可以实现跨浏览器背景..实际上可以在较低的 ie 版本中工作。

然而，有一些 jquery 插件，比如这个：

http://srobbin.com /blog/jquery-plugins/jquery-backstretch/

回复收藏 0 原文

浅忆 2024-12-06 21:33:43

尝试指定 img 的宽度和高度，然后如果它是在图像的两侧进行切割的。否则，您的图像将根据屏幕尺寸被截断；或者拉伸，如果您将其尺寸设置为与屏幕尺寸相匹配。

回复收藏 0 原文

怀里藏娇 2024-12-06 21:33:43

谷歌：CSS自动调整背景图片大小
http://css-tricks.com/3458-perfect-full-页面背景图像/

回复收藏 0 原文

晨曦÷微暖 2024-12-06 21:33:43

我决定再次回答这个问题，考虑到不同的要求，两者都是有效的；但是，如果您不希望图像在底部被切断，则此问题专门解决了这一问题。

演示： http://wecodesign.com/demos/stackoverflow-7082174。嗯

<style type="text/css">
#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;    
}
#contentContainer {
    position: relative;
    width: 500px;
    height: 500px;
}
#theContent {
    /* this is all pretty much just to make it look good, nothing important in here */
    position: absolute;
    top: 200px;
    left: 200px;
    background: #FFF;
    width: 80px;
    height: 80px;
    opacity: 0.7;
    border-radius: 6px;
    padding: 10px;
}
</style>

<div id="contentContainer">
    <img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" />
    <div id="theContent">This is the content</div>
</div>

I decided to answer this question again, given the different set of requirements, both are valid; however, this one specifically addresses if you DON'T want the image to be cut off at the bottom.

DEMO: http://wecodesign.com/demos/stackoverflow-7082174.htm

<style type="text/css">
#background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;    
}
#contentContainer {
    position: relative;
    width: 500px;
    height: 500px;
}
#theContent {
    /* this is all pretty much just to make it look good, nothing important in here */
    position: absolute;
    top: 200px;
    left: 200px;
    background: #FFF;
    width: 80px;
    height: 80px;
    opacity: 0.7;
    border-radius: 6px;
    padding: 10px;
}
</style>

<div id="contentContainer">
    <img id="background" src="stackoverflow-7082174.jpg" alt="Pretty Background" />
    <div id="theContent">This is the content</div>
</div>

回复收藏 0 原文

顾北清歌寒 2024-12-06 21:33:43

我刚刚从生活社交中剥离了代码，并认为如果我把它放在这里会很方便：

<div id="landing-page-container">
  <div id="background-container">
    <div>
      <img alt="background" id="background" src="files/background.jpg">

    </div>
  </div>

</div>
<div class="container"></div>

这是你的CSS：

html {width: 100%; height: 100%}
body {width: 100%; height: 100%}
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1}
#background-container {width: 100%; height: 100%; position: absolute}
#background {width: 100%; height: auto; z-index: -100}

当然你需要提供你的background.jpg

I just stripped the code from living social and thought it would be handy if I put it here:

<div id="landing-page-container">
  <div id="background-container">
    <div>
      <img alt="background" id="background" src="files/background.jpg">

    </div>
  </div>

</div>
<div class="container"></div>

and here is your css:

html {width: 100%; height: 100%}
body {width: 100%; height: 100%}
body, #landing-page-container {width: 100%; height: 100%; background-color: black; z-index: 1}
#background-container {width: 100%; height: 100%; position: absolute}
#background {width: 100%; height: auto; z-index: -100}

and of course you need to supply your background.jpg

回复收藏 0 原文

~没有更多了~