我有这个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;
}
和这个html:
<div id="wrapper1">
<div id="wrapper2">
<div id="wrapper3" class="clearfix" <!-- content here -->
<p>blah blah blah</p>
</div>
</div>
</div>
我需要添加2张图片 - 从中间列向左和向右添加,而不会更改中心列宽度,并且图像不会影响页面的整体宽度。 例如:
我可以添加图片,并做了一些尝试
当我尝试更改浏览器宽度时 - 背景图片位于中央列下
我试图更改min-width:1020px; to min-width:1665px;
- 乍一看,一切都很好,但对于屏幕分辨率 - 小于1665像素,所有内容都转移到右侧
我尝试了一些选项,但没有成功
我的问题:我可以放置一个图像,这样当你改变浏览器的宽度时 - 减少到中心列左右的距离(如果没有背景图像,这是默认行为)
Here is code with images examples.
如果我使用 1020px 空白中心部分制作1张大图像并将左/右图像放入其中...它会起作用吗?
答案 0 :(得分:18)
您可以遵循多种解决方案:
1)使用div:[good]
创建一个好的“div”框架可以解决你的问题,例如:
<div id="allWrapper">
<div id="leftSidebar"></div>
<div id="centerOrContent"></div>
<div id="rightSidebar"></div>
</div>
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...
然后使用CSS(浮动和尺寸),您可以调整视图。
2)使用多个背景:[并不总是好]
您可以使用此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)使用静态“大”图像:[懒惰解决方案]
根据您的建议使用静态图像(中间有空白)也可以解决问题,但如果网站是“响应式”,您可能会遇到不同屏幕分辨率的图形问题(或调整浏览器窗口的大小)。 在这种情况下,您还必须修复中心列的位置和宽度(在窗口大小调整时)。
4)使用响应式设计:[优秀 - 做到了!]
为避免图像在中央(内容)div上重叠,您可以将背景颜色(此div)设置为白色。
同样,为避免重叠,您可以设置“特殊”响应式CSS。这检测窗口的宽度是否大于1。 X这两个图像消失了。例如,这个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;
}
}
以下是有关响应式设计的一些链接:
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design
http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow
答案 1 :(得分:3)
您可以使用两个具有两个背景的绝对DIV。一个左中心,另一个右中心:
将DIV放置在网站中的任何位置。 (他们绝对定位)
HTML:
<div class="background" id="background1"></div>
<div class="background" id="background2"></div>
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;
}
答案 2 :(得分:0)
这是我的有效代码。唯一会改变的是两个属性的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;
}