0

我正在使用 wordpress 软件为一个政党（不是客户，我自己的目的）开发网站。我正在通过主题迷修改名为新鲜生活的主题。实际上我不是前端开发人员，但我正在尽最大努力改变与政党旗帜相匹配的主题风格。

首先，我正在修改样式的网站是www.ysrcong.com。政党旗帜网址为http://c.searchandhra.com/1/YSR%20Cong%20Flag.jpg。

我正在尝试将网页左侧的背景颜色设置为 2266BB，将网页的右侧部分设置为 0FBD60，将页面的中间部分设置为白色。网站宽度的中间部分为 950 像素。左右没有特定的宽度。

我用谷歌搜索并找到了一种解决方案。我实施的解决方案是，我设计了一个图像，其颜色为 2266BB 和 0FBD60，宽度和高度相同，颜色为 2266BB，左侧为 2266BB，右侧为其他颜色。

我已将该图像设置为所有网页的背景。似乎在大多数浏览器中都可以正常工作，但有一些小问题。我面临的问题是

1. in ie6 seems everything was messed up. entire layout was changed.
2. in all browsers white colour was not filled with 100% in middle part of webpage. at the bottom it  was  left some height and that part was filled with  background image

请给我建议如何解决这两个问题，以及是否有其他有效的解决方案来实现这一点。

以下我写的代码。

html code
-------------------------
<body>
   <div id="bg"><img src="bg.png"  width="100%" height="100%" alt="">
   </div>
   <div id="#wrapper">
   webpage content goes here.
   </div>
</body>

styles i applied.
---------------------------------
body {
   height:100%; margin:0; padding:0;
}
html {
   height:100%;
}
#bg {
   position:fixed; top:0; left:0; width:100%; height:100%;
}
#wrapper {
   background: #fff;
   margin: 0 auto 0px auto;
   padding: 10px 15px 0 15px;
   width: 950px;    
   position:relative; 
}
4

3 回答 3

0
  1. 删除您为背景创建的#bg div
  2. 创建一个 1px 高 x 3000 + px 宽的图像。将图像分成两半，左右两边是你想要的颜色
  3. 将css中的body标签设置为background: url(path/to/your/image) repeat-y center top;
  4. 庆祝，你完成了
于 2012-03-01T17:55:58.610 回答
0

为了灵活性，我个人会在 body 上使用像这样的 css 渐变：

background: #2266bb; /* Old browsers */
background: -moz-linear-gradient(left,  #2266bb 50%, #0fbd60 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#2266bb), color-stop(51%,#0fbd60)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* IE10+ */
background: linear-gradient(to right,  #2266bb 50%,#0fbd60 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2266bb', endColorstr='#0fbd60',GradientType=1 ); /* IE6-9 */

然后，您可以为旧浏览器提供“背景图像”后备。

于 2014-01-30T15:31:08.013 回答
0

我的倾向是做这样的事情。

HTML

<!doctype html>
<html>
<body>
<div class="stripe one"></div>
<div class="stripe three"></div>
<article>
Content here.
</article>
</body>
</html>

使用 CSS

html {height:100%;}
body {background-color:#fff;height:100%}
.stripe {width:30%;height:100%;position:fixed;top:0;bottom:0;}
.one {left:0;background-color:#26b;}
.three {right:0;background-color:#0FBD60;}
article {width:30%;margin:5% auto;}

链接在这里：http: //jsfiddle.net/folktrash/EQE6K/

于 2012-03-01T18:00:32.223 回答