gpt4 book ai didi

html - CSS challenge : Two background images, centered column with fixed with, min-height 100%

转载 作者:行者123 更新时间:2023-11-28 13:50:17 25 4
gpt4 key购买 nike

一言以蔽之

我需要一个 CSS 解决方案来满足以下要求:

  • 两张垂直重复的背景图片,一张左对齐,一张右对齐
  • 顶部有一个居中列,宽度固定,最小高度为 100%
  • 跨浏览器兼容性

更多细节

今天对我当前的网站元素提出了一个新要求:一个在左侧和右侧具有渐变的背景图像(替换当前的正文背景图像)。现在的挑战是指定两个不同的背景图像,同时保持布局规范的其余部分。不幸的是,(简单的)布局与这两个背景不相符。

我的布局基本上是一个固定宽度的居中列:

#main_container {
background-color: white;
margin: 0 auto;
min-height: 100%;
width: 800px;
}

此外,有必要将列的最小高度拉伸(stretch)到 100%,因为有相当多的页面只有很少的内容。以下 CSS 样式可以解决这个问题:

html {
height: 100%;
}

body {
background-image: url('old-background.png');
margin: 0;
height: 100%;
padding: 0;
}

到目前为止一切顺利 - 直到带有渐变的新 body 背景图像出现。我尝试了以下解决方案

  1. 主容器后面的两个绝对定位的div
  2. 一张图片用 body 定义,一张用 html CSS 类定义
  3. 一个图像定义为主体,另一个图像以大 div 开始主容器

使用其中任何一个,动态高度解决方案都被破坏了。要么主容器太小时没有拉伸(stretch)到 100%,要么内容实际上更长时背景保持在 100%

最佳答案

修改:

<body>
<div class="container"><div>
<div id="main_content"></div>
</body>

使用 CSS:

html {
height: 100%;
}
body {
background: url(left.png) repeat-y top left;
background-attachment:fixed;
height: 100%;
margin: 0;
padding: 0;
}
div.container {
background: url(right.png) repeat-y top right;
height: 100%;
width: 100%;
position:fixed; /* This won't work in all browsers. May need a JS solution for IE6 */
}
#main_content {
height: 100%;
width: 800px;
margin: 0 auto;
background-color: white;
}

编辑:

此版本适用于支持 position:fixed(非 ie6)的浏览器。

示例页面:http://jsbin.com/ebozi3/4/edit

关于html - CSS challenge : Two background images, centered column with fixed with, min-height 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2578633/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com