Question

http://www.libertyseguros.pt/

在示例页面上，您可以看到渐变背景和阴影背景。这是如何实现的？

Answer 1

这只是一个带有自动边距的div的背景图像：

#wrapper {
  background: blue url("gradient.jpg") left top repeat-x;
}
  #content_shadow {
    background: black url("side-shadow.jpg") left top no-repeat;
    width:960px;
    margin:auto;
  }
    #content {
      width: 940px; margin: auto; background: white;
    }

<div id="wrapper">
  <div id="content_shadow">
    <div id="content">
      <p>Hello World</p>
    </div>
  </div>
</div>

Answer 2

查看页面来源

<head> 
... <link href="App_Themes/Liberty/LibertyStyle.css" 
          type="text/css" rel="stylesheet" />  ...
</head>

LibertyStyle.css是您需要的样式表。您可以按照相应的URL查看它 http://www.libertyseguros.pt/App_Themes/Liberty/LibertyStyle.css。有趣的属性如下：

body 
{
    background-image:url('../../Images/repeat.jpg');
    ...
    background-repeat:repeat-x;
    ...
}

因此，它只是一个重复的背景（http://www.libertyseguros.pt/Images/repeat.jpg）。

This page更详细地解释了上述技术。

Answer 3

我认为这正是您所寻找的，您也可以在一行中完成：

body {
background: url('http://www.libertyseguros.pt/Images/repeat.jpg') top repeat-x #3F8AAA;    
}

我会用本地网址替换图片网址，但你应该明白这个想法。在此之后，您的其他标记将在您的身体之上等等。

Answer 4

只需使用CSS在页面的主体上设置背景图片。

其余内容将放在它前面。

（你可以使你的标题更具描述性。）

Answer 5

它只是一系列彼此相邻排列的背景图像，如下所示：

+-------+-------------+-------+
| 1 | 2 |             | 4 | 1 |
|   |   |      3      |   |   |
|   |   |             |   |   |

最左侧和最右侧的图像是相同的，1像素宽的垂直渐变。内部（2,4）图像是过渡梯度，它们是彼此的镜像，而中心件（3）只是在正确的点上发出的图像以接受徽标。

Answer 6

背景渐变应用于主体，阴影是在单独的图层中应用的两个单独的背景。

在您引用的页面中，阴影图像将应用为全尺寸jpg图像。我会使用1px高png和32位梯度透明度。

您所参考的页面也使用绝对定位的div标签。我的例子使用table来简化。

<head>
    <style type="text/css">
    body
    {
        background-image:url('repeat.jpg');
        background-repeat:repeat-x;
        background-color: blue;
    }
    #leftShadow
    {
        width:50px;
        background-image:url('shadowLeft.png');
        background-repeat:repeat-y;
    }
    #mainContent
    {
        width:800px;
        background-color: white;
    }
    #rightShadow
    {
        width:50px;
        background-image:url('shadowRight.png');
        background-repeat:repeat-y;
    }
    </style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="margin-left:80px;margin-right:80px;height:90%;">
    <tr>
        <td id="leftShadow"><!-- Left shadow --></td>
        <td id="mainContent"><!-- Main content --></td>
        <td id="rightShadow"><!-- Right shadow --></td>
    </tr>
</table>
</body>

模拟两个背景

6 个答案: