代码之家 › 专栏 › 技术社区 › Mike

围绕灵活内容的背景图像?

css html

Mike · 技术社区 · 15 年前

我试图在内容分区周围获得一些背景图像。事实上,内容分区应该有一个灵活的宽度(没问题)。背景图片应始终左、右附加到内容分区。但是:只有当用户将窗口缩小到内容分区的宽度时,才应触发水平滚动条。

我想到了这样的事情:

<div>
    <div class="header">/div>
 <div class="wrapper">  
     <div class="left"></div>
     <div class="right"></div>
     <div class="content">Content</div>
 </div>
    <div class="footer">/div>
</div>



.wrapper{
 margin:auto;
 width:950px;
position:relative;
}

.left {
background:transparent url(../images/left.png) no-repeat scroll 0 0;
position:absolute;
top:0;
left:-120px;
width:120px;
height:500px;
}

.right {
background:transparent url(../images/right.png) no-repeat scroll 0 0;
position:absolute;
top:0;
right:-120px;
width:120px;
height:500px; 
}

当窗口点击右边的绝对分隔符时,滚动条总是出现。我需要它们是两个分隔符(左/右),因为内容分隔符应该是灵活的,并且在扩展到很大程度时不隐藏背景。

有人有这方面的技术吗?

2 回复 | 直到 15 年前

eringen 15 年前

您有一个未命名的普通根容器分区。

为这个DIV添加这个样式(或者给一个类/ID名称来连接CSS减速)。要点是 min-width …保持与容器分区的宽度相同。

还加入 body,html{margin:0;padding:0;} 会更好。

style="width:100%;overflow:hidden;min-width:950px;position:relative; height:100px;"

这对于IE6来说是很好的执行。对于IE,您可以应用一些JS魔法。

假设您使用的是jquery库,并且为根容器div提供了id名称“shell”。然后只为ie6尝试这个脚本。(创建排除或类似的内容):

$(document).ready(function(){
 $('#shell').each(function(){
  var that = this;
  var contentWidth = 950;
  check();
  $(window).resize(check);
  function check() {
   var winWidth = Math.ceil($('body').width());
   if(winWidth <= contentWidth) {
    $(that).css({'width':contentWidth});
   } else {
    $(that).css({'width':'100%'});
   }
  }
 });
});

这个脚本将使“shell”的宽度为100%。(如果浏览器的宽度大于950px),否则它将用950px锁定shell的宽度,从而启用滚动条。

guzart 15 年前

我为一个网站做了类似的事情,我得到的解决方案是:

我创建了一个图像,背景上有左右内容,中间有内容的空间,所以它只是一个纯色,即使图像是1400 x 539,它的重量是12kb,所以非常好。

<html>
  <body>
    <div id="wrapper"></div>
  </body>
</html>


body {
  background: #fff url(left-and-right.jpg) no-repeat center top;
  text-align: center;
}

#wrapper {
  margin: auto;
  text-align: left;
  width: 960px;
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前