10

我有这个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 个图像 - 从中​​心列向左和向右，中心列宽度没有变化，并且图像不会影响页面的整体宽度。例子：

示例图像

我可以添加图像，并做了一些尝试

  1. 当我尝试更改浏览器宽度时 - 背景图像位于中央列下方图片

  2. 我试图改变min-width:1020px; to min-width:1665px;- 乍一看，一切都很好，但对于屏幕分辨率 - 小于 1665 像素的所有内容都向右移动我尝试了几个选项但没有成功

我的问题：我可以放置一个图像，以便在您更改浏览器的宽度时 - 减少中心列左右的距离（如果没有背景图像，这是默认行为）

这是带有图像示例的代码。

如果我用1020px空白中心部分制作 1 张大图像并将我的左/右图像放入其中.. 它会工作吗？

4

3 回答 3

24

您可以遵循多种解决方案：

1）使用div：[好]

创建一个良好的 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。这会检测窗口的宽度是否 < 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;
 }
}

这里有一些关于响应式设计的链接：

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

于 2013-02-25T14:00:40.230 回答
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;
}
于 2013-02-25T13:56:12.330 回答
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;
}
于 2019-02-08T10:06:07.543 回答