Html 如何添加两个背景图像 - 从中心列向左和向右
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15068260/
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 add two background images - left and right from center column
提问by Vasiliy Terkin
I have this css:
我有这个 css：
#wrapper1 {
min-width:1020px;
min-height:100%;
}
#wrapper2 {
height:100%;
background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat;
}
#wrapper3 {
width:1020px;
margin:0 auto;
}
and this html:
和这个 html：
<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3" class="clearfix" <!-- content here -->
<p>blah blah blah</p>
</div>
</div>
</div>
I need to add 2 images - left and right from center column without center column width changes and that the images did not affect the overall width of the page. Example:
我需要添加 2 张图像 - 中心列的左侧和右侧没有中心列宽度变化，并且图像不会影响页面的整体宽度。例子：
I can add images, and made a some attempts
我可以添加图像，并做了一些尝试
when I try to change browser width - background images go under the central column
I tried to change
min-width:1020px; to min-width:1665px;- at first glance, all is well, but for the screen resolution - less than 1665px all content is shifted to the right I tried a few options but unsuccessfully
当我尝试更改浏览器宽度时 - 背景图像位于中央列下方
我试图改变
min-width:1020px; to min-width:1665px;- 乍一看，一切都很好，但对于屏幕分辨率 - 小于 1665px 所有内容都向右移动我尝试了几个选项但没有成功
My question: сan I place an image so that when you change the width of the browser - reduce distance to the left and right of the center column (this is the default behavior if no background images)
我的问题：我可以放置一个图像，以便当您更改浏览器的宽度时 - 减少到中心列左右两侧的距离（如果没有背景图像，这是默认行为）
Here is code with images examples.
If I make 1 big image with 1020pxblank center part and put my left/right images into it.. will it work?
如果我用1020px空白中心部分制作 1 个大图像并将我的左/右图像放入其中..它会起作用吗？
回答by damoiser
You can follow multiple solutions:
您可以遵循多种解决方案：
1) Use divs: [good]
1）使用div：[好]
Creating a good "framework" of divs can solve your problem, for example something like this:
创建一个好的 div“框架”可以解决您的问题，例如这样的：
<div id="allWrapper">
<div id="leftSidebar"></div>
<div id="centerOrContent"></div>
<div id="rightSidebar"></div>
</div>
And a pseudocode of CSS (not tested):
和一个 CSS 伪代码（未测试）：
div#allWrapper{
width: 100%;
height: 100%;
}
div#leftSidebar{
min-width:?[theWidthOfLeftImage] px;
height: 100%;
background-image: url(leftImage.jpg);
background-position: center right;
}
etc...
Then playing with CSS (floating and sizes) you can adjust the view.
然后使用 CSS（浮动和大小），您可以调整视图。
2) Use multiple background: [not always good]
2）使用多个背景：[并不总是好的]
You can use this CSS pseudocode to use multiples backgrounds (found here: http://www.css3.info/preview/multiple-backgrounds/)
您可以使用此 CSS 伪代码来使用多个背景（在此处找到：http: //www.css3.info/preview/multiple-backgrounds/）
div#example1 {
width: 500px;
height: 250px;
background-image: url(oneBackground), url(anotherBackground);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
3) use static "big" image: [lazy solution]
3）使用静态“大”图像：[懒人解决方案]
Use a static image as you suggest (with blank in the middle) can also solve the problem, but if the website is "responsive" you can have graphic issues with different screen resolution (or resizing the browser-window). In this case you must fix the position and the width of the central column too (on window resizing).
按照您的建议使用静态图像（中间为空白）也可以解决问题，但如果网站是“响应式”，您可能会遇到不同屏幕分辨率（或调整浏览器窗口大小）的图形问题。在这种情况下，您也必须固定中央列的位置和宽度（在调整窗口大小时）。
4) use responsive design: [excellent - do it!]
4) 使用响应式设计：[优秀 - 去做吧！]
To avoid the overlapping of the images on the central (content) div, you can set as background-color (of this div) as white.
为避免中央（内容）div 上的图像重叠，您可以将（此 div 的）背景颜色设置为白色。
Again, to avoid overlapping, you can set a "special" responsive CSS. That detects if the window has width < X the 2 images disappears. For example with this CSS pseudocode:
同样，为了避免重叠，您可以设置“特殊”响应式 CSS。检测窗口是否具有宽度 < X 2 个图像消失。例如使用这个 CSS 伪代码：
@media only screen and (min-width: 481px) {
//here happens something when the screen size is >= 481px
div#example {
background-image: url(oneBackground);
}
}
@media only screen and (max-width: 481px) {
//here happens something when the screen size is <= 481px
div#example {
background-image: none;
}
}
Here's some links about responsive design:
这里有一些关于响应式设计的链接：
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
回答by Alvaro
You can use two absolute DIVs with two backgrounds. One left center and another one right centered:
您可以使用具有两个背景的两个绝对 DIV。一个左居中，另一个居中右：
Place the DIVs wherever you want in the site. (they are absolutely positioned)
将 DIV 放置在站点中您想要的任何位置。（他们绝对定位）
HTML:
HTML：
<div class="background" id="background1"></div>
<div class="background" id="background2"></div>
CSS:
CSS：
.background{
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#background1{
background: url(yourImage1.jpg) no-repeat 100% 0;
}
#background2{
background: url(yourImage2.jpg) no-repeat 0 0;
}
回答by iFart
This is a working code for me. the only thing will be change is the background-positionfor both property.
这是我的工作代码。唯一会改变的是background-position两个属性。
.image-bg-custom1 {
background-image: url(/images/left-get.png);
background-repeat: no-repeat;
background-position: center left;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.image-bg-custom2 {
background-image: url(/images/right-get.png);
background-repeat: no-repeat;
background-position: center right;
height: 100%;
right: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
