HTML/CSS后台设计

我需要有关网站背景的帮助，以下是我想知道的详细信息：

• 网站左侧和右侧的不同渐变背景（在所有IE浏览器上也适用）
• 我将如何使用HTML/CSS实现这一点

请帮忙。谢谢

---

< P>在所有浏览器中工作的一个最佳方案是，使用一个巨大的图像，中间有一个分隔，宽度为<代码> 2048代码>，使垂直滚动固定。

这在所有浏览器中都适用

body {background: url("huge-image.png") center top no-repeat;}

给所有说bg将大的人。

分辨率为：

19488x3552

的图像，大小仅为

51kb

。请查看：

（来源：）

生成你的身体背景

使用透明的幕墙图像背景创建居中的容器div

在容器分区100%高度中创建居中的网站容器分区，并将背景设置为灰色

祝你好运

昆汀评论的澄清：使用对角线梯度：

background: #b5bdc8; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(135deg,  #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

---

这是通过CSS制作背景纹理的方法

background: linear-gradient(left, white 50%, #8b0 50%);
background-size: 100px 100px;

注意：您可以更改极性和线性的值，然后通过背景位置在整个页面中定义不同的背景

也请查看此项。-->

它也可以使用图像作为梯度的基础。打开这个，试试下面的东西

---

您可以使用css渐变。这应该适用于所有浏览器

background-image: linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -o-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -moz-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -webkit-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -ms-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);

background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0.16, rgb(232,232,232)),
    color-stop(0.58, rgb(122,122,122)),
    color-stop(0.79, rgb(115,115,115))
);

旧版本的IE不支持渐变，所以您必须创建第二个div容器，它在其他浏览器上是透明的

background-image: linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -o-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -moz-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -webkit-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);
background-image: -ms-linear-gradient(left top, rgb(232,232,232) 16%, rgb(122,122,122) 58%, rgb(115,115,115) 79%);

background-image: -webkit-gradient(
    linear,
    left top,
    right bottom,
    color-stop(0.16, rgb(232,232,232)),
    color-stop(0.58, rgb(122,122,122)),
    color-stop(0.79, rgb(115,115,115))
);

并为旧版本的IE定义新的css，例如：

<!--[if lte IE 8]> 
<style>

    .diaggradientback
    {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        overflow:hidden;
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType='1', startColorstr='#ffa885', endColorstr='#330000');
    }

    .diaggradientfront
    {
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        overflow:hidden;
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType='0', startColorstr='#bbffa885', endColorstr='#bb330000');
    }
</style> 
<![endif]--> 

---

如果您想让它在较旧的浏览器上运行，可以编写如下代码：

这是一个更复杂的html——它完全取决于您需要在哪个浏览器上运行它

CSS:

HTML:

---

---

编辑：我在

.bg right

中将主容器的代码更改边距更新为padding，因为这是一个更可靠的解决方案。

您尝试过什么吗？所以您想要一个适用于IE 1.0+的解决方案。祝你好运。我以前用这个作为背景，但总是有一个问题：html{background:url（../images/bg right.png）top right repeat-y；}body{font family:Arial；font size:12px；background:url（../images/bg left.png）top left repeat-y；}IE只值得下载firefox、chrome等。。。这是IE中的一个问题。@AntonioM.Mérida-大多数人都必须为广大公众而建网站，而不仅仅是为他们自己。我们对浏览器质量的看法并不重要。巨幅图像=巨大带宽=缓慢=潜在的昂贵（对于站点和访问者）@Quentin巨幅图像+这个案例=小尺寸=低带宽=更多访问者！！！您可以有两个单独的图像，一个用于左div，一个用于右div。您可以有一个切片（即1000px x 1），并为div的长度添加一个

repeat:repeat-x

。所有人都说bg会很大。分辨率为：

19488x3552

的图像，大小仅为

51kb

。看看：@PraveenKumar-这是一幅纯黑的图像。固体黑色图像压缩真的很好！标准CSS不应该在供应商前缀CSS之后出现，这样它就可以在级联中获胜吗？这会产生一个水平梯度。问题是要求两个相邻的垂直渐变。这对IE7有效吗？你得到一个从左上到右下的渐变。对于IE6-8，你需要两个div容器。您推荐的工具与Abdul Malik相同；我仍然没有看到任何选项可以创建一对并排渐变IE7@Quentin我建议你有身体背景。提到“并排”效果是为了使网站容器div同步3@JanTuroň-不，第三步是灰色背景和中间部分。不是左边的白色到黑色的渐变，也不是右边的灰色到黑色的渐变。@JNGarcia87 IE7现在几乎是死气沉沉的浏览器：如果有人仍然使用它，他对缺少背景渐变并不感到惊讶。是否可以使用重复的渐变图像而不是使用css3？是的，这是绝对可能的。在最后3行中查看我的编辑。Safari不支持。嗨，Lucas，这是一个好主意，但我认为如果您尝试最小化浏览器，这将无法正常工作：）

.bg-left { background: url('http://cdn.imghack.se/images/3be5ae39376f069c0f49dd0cf09e74c7.png') top left no-repeat; } 
.bg-right { padding: 0 118px 0 125px; background: url('http://cdn.imghack.se/images/ae53c28777043687b9a110e867798cb5.png') top right no-repeat; }
.main-content { height: 800px; background-color: white; }

<div class="bg-left">
  <div class="bg-right">
    <div class="main-content">

    </div>
  </div>
</div>