Html 如何为背景图像留出边距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7794247/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Have Margin For Background Image?
提问by its_me
The following is the structure of the code of my website.
以下是我网站的代码结构。
<body class="xxx">
<div id="top-header">... code ...</div>
<div id="wrapper">... code ...</div>
</body>
And this is the CSS code I use for a background image.
这是我用于背景图像的 CSS 代码。
body {
background-image: url('http://example.com/background-image.jpg');
background-position: top right;
background-repeat: repeat;
}
The problem I have with this is, about 50px of the background image is hidden under the "top-header" div, which is 50px in height (It's the menu). How do I adjust the code so that the background image shows properly, fully below the menu (top-header)?
我遇到的问题是，大约 50 像素的背景图像隐藏在“顶部标题”div 下，高度为 50 像素（这是菜单）。如何调整代码以便背景图像正确显示，完全位于菜单（顶部）下方？
Just so, you know, I tried this css code as well:
就这样，你知道，我也试过这个 css 代码：
#wrapper {
background-image: url('http://example.com/background-image.jpg');
background-position: top right;
background-repeat: repeat;
}
And this changed the white background of my content to the image. Which is not what I want.
这将我的内容的白色背景更改为图像。这不是我想要的。
The only way is to move the starting point of background-image 50px down. How do I define that? Please try help. Thanks.
唯一的方法是将 background-image 的起点向下移动 50px。我该如何定义？请尝试帮助。谢谢。
采纳答案by its_me
Sorry guys, this was easy. I actually followed the CSS Twitter uses for background, and I got it. I just had to replace "top right" with "right 50px" where 50px is equal to the margin you'd like to leave at the top of the background image.
对不起，伙计们，这很容易。我实际上遵循了用于背景的 CSS Twitter，我明白了。我只需要将“右上角”替换为“右 50 像素”，其中 50 像素等于您希望在背景图像顶部留下的边距。
body {
background-image: url('http://example.com/background-image.jpg');
background-position: right 50px;
background-repeat: repeat;
}
cheers!
干杯！
回答by Dayz
use this in style:
使用它的风格：
background-position: calc(100% - 30px) center;
example:
例子：
body {
background-image: url('http://example.com/background-image.jpg');
background-position: calc(100% - 30px) center;
background-repeat: repeat;
}
instead of 30px you can change the pixel value for positioning the background image.
您可以更改用于定位背景图像的像素值，而不是 30px。
