背景大小不适合元素

发布于 2024-10-27 10:33:25 字数 888 浏览 1 评论 0原文

我尝试使用 CSS3 背景大小制作背景以适应页面的高度，但它仅适用于宽度，但不适用于高度。

我打算让这个背景图像适合 100% 的页面宽度和高度，即使打破了它的比例，我也没有看到这个问题，因为我使用了 background-size:100% 100%;和

百分比相对于宽度或高度'background-origin' 给出的区域

（background-origin的任何值都不会改变）

我需要一些提示来了解为什么我不能使背景高度适合？我怎样才能做到这一点？

这是我的 css 的一部分：

html {
    height:100%;
    min-height:100%;
}
body {
    min-height:100%;
    margin:0;
    padding:0 2em;
    background:#474747 url(../images/bg.jpg) 100% 0 no-repeat;
    background-size:100% 100%; /* raaaaaah */
    font-family:Cambria,serif;
    min-width:910px;
    position:relative;
}

提前致谢！

编辑：您可以在 http://matthecat.com/v2/blog.html 上进行测试

原文

I've tried to make a background to fit page’s height using CSS3 background-size but it works only for width, but not height.

I intended to make this background image fit 100% of page’s width and height even while breaking its ratio, I don’t see the problem since I use background-size:100% 100%; and

The percentage is relative to the width or height of the area given by 'background-origin'

(Any value for background-origin changes nothing)

I need some hints about why can't I make the background height to fit <body>? And how could I do that?

Here's a part of my css:

html {
    height:100%;
    min-height:100%;
}
body {
    min-height:100%;
    margin:0;
    padding:0 2em;
    background:#474747 url(../images/bg.jpg) 100% 0 no-repeat;
    background-size:100% 100%; /* raaaaaah */
    font-family:Cambria,serif;
    min-width:910px;
    position:relative;
}

Thanks in advance!

EDIT: you can test on http://matthecat.com/v2/blog.html

分享到QQ

分享到微博

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

发布评论

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

拒绝两难 2024-11-03 10:33:25

我认为你过于复杂化了。我不知道所有其他 css 代码是做什么用的。我认为有些人甚至什么也没做。

body {
    background:#474747 url(http://www.cssplay.co.uk/layouts/rabbit.jpg);
    background-size:100% 100%;
}

这段代码非常适合我。

我不太确定你为什么要这样做。有很多更好的方法来设置页面背景。您可以使用 background-repeat:repeat-y 作为背景切片来填充顶部部分，并使用与背景颜色混合的渐变图像 (#474747)。或者，如果它是纹理，您可以完全重复。您想将其用于什么样的图像？

I think you are over complicating. I don't know what all the other css code is for. I don't think some those even do anything.

body {
    background:#474747 url(http://www.cssplay.co.uk/layouts/rabbit.jpg);
    background-size:100% 100%;
}

this code works perfect for me.

I'm not really sure why you would want to do this anyway. There are much better ways to set the background of your page. You could use background-repeat:repeat-y for an bg slice to fill the top portion, and use a gradient image that blends into the bg color (#474747). Or if it is a texture, you could just do a full repeat. What kind of image are you trying to use this with?

回复收藏 0 原文