请问这个背景和这个页面怎么做，求详细教程，主要是要知道背景菱格怎么做，要详细步骤，谢谢

html-css015

请问这个背景和这个页面怎么做，求详细教程，主要是要知道背景菱格怎么做，要详细步骤，谢谢,第1张

主要介绍一下背景吧：（我在illustrator做的，和PS做法差不多）

首先背景填充红色渐变，中间浅两端深

画方形旋转90度成菱形，复制排列

菱形填充白色，根据需要调整透明度（我这里就不细调了）

用margin可以。因为margin可以设为负值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style>

.img-div { background:#ccc width:200px}

.img-div img.margin-t{ margin-top:-30px}

.img-div img.margin-l{ margin-left:32px}

</style>

</head>

<body>

<div class="img-div">

<img src="img.png" /><img src="img.png" /><img src="img.png" />

<img src="img.png" class="margin-t margin-l" /><img src="img.png" class="margin-t"/>

<img src="img.png"  class="margin-t"/><img src="img.png" class="margin-t" /><img src="img.png" class="margin-t"/>

<img src="img.png"  class="margin-t margin-l"/><img src="img.png" class="margin-t" />

<img src="img.png"  class="margin-t"/><img src="img.png" class="margin-t" /><img src="img.png" class="margin-t"/>

</div>

</body>

</html>

附件就是例子，你可以直接看效果。