-4

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

  • 网站左侧和右侧不同的渐变背景（它应该也适用于所有 IE 浏览器）。
  • 我将如何使用 HTML/CSS 做到这一点？

请帮忙。谢谢！

在此处输入图像描述

4

5 回答 5

2

如果您希望它在较旧的浏览器上工作，您可以编写如下内容：

http://jsfiddle.net/ftcjZ/2/

这是更复杂的 html - 这一切都取决于您需要在哪个浏览器上运行它。

CSS：

.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; }

HTML：

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

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

编辑：我将主容器的代码更改边距更新为填充，.bg-right因为这是更可靠的解决方案。

于 2013-06-26T07:41:55.353 回答
0
  1. 在这里生成你的身体背景
  2. 使用透明的窗帘图像背景创建居中的容器 div
  3. 在容器 div 100% 高度中创建居中的网站容器 div 并将背景设置为灰色

祝你好运。

澄清昆汀的评论：使用对角线渐变：

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 */
于 2013-06-26T07:27:12.330 回答
0

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

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

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

还要检查一下。--> http://lea.verou.me/css3patterns/

它也可以使用图像作为渐变基础。打开这个noisetexturegenerator.com并尝试下面的事情

 body { background-image:url('gradient image'); background-repeat:repeat-x; }
于 2013-06-26T07:27:37.423 回答
0

在所有浏览器和大多数分辨率下工作的一个最佳想法是，使用一个巨大的图像，中间有一个分隔，宽度为2048，并使垂直滚动固定。

这适用于所有浏览器。

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

对于所有说 bg 会很大的人。

分辨率的图像：19488 x 3552大小为51 KB. 一探究竟：


（来源：znate.ru）

于 2013-06-26T07:22:38.390 回答
-1

您可以使用 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容器，它在其他浏览器上是透明的。

并为旧版本的 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]-->
于 2013-06-26T07:28:49.697 回答