我在html代码中使用多个div。每个div将保存1600 * 750的图像。每个div里面我都有固定的图片。这些图片会在每个div上重复播放,我将这些图片称为每个div上的图片。 我的第一图像是218 * 73 我的第二图像是774 * 209 我的第三个是127 * 37html代码在一个背景图像在不同位置的三个图像
欲解决我的第一图像位置在137 * 88我的背景的div图像。 655 * 339的背景div图像的第二幅图像。 708 * 670背景div图像的第三幅图像。
我不想用身体修复为背景图像,因为我在所有div上都有三个修复图像的多个div。
任何一个可以告诉如何使用类为多个div来解决这些问题。提前 感谢
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page</title>
<title>jQuery Parallax Plugin Demo</title>
<link rel="stylesheet" type="text/css" href="sd.css" />
</head>
<body>
<div id="a">
<div id="first" >
<div class="c d" >
This is my first div to display image.
</div>-->
</body>
</html>
CSS
body{
margin: 0;
min-width: 980px;
padding: 0;
padding: 0;
}
div {
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
}
#first{
width: 100%;
}
#first{
background:url('images/rc1.jpg') 50% 0 no-repeat fixed;
color: white;
height: 600px;
margin: 0 auto;
padding: 160px 0 0 0;
padding: 0;
perspective: 1px;
}
#first .d{
margin: auto;
position: relative;
width:=655px;
height:339px;
background: url('images/Logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
#first .c{
margin: auto;
position: relative;
width:=137px;
height:88px;
background: url('images/big_text.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
#first .e{
margin: auto;
position: relative;
overflow-x: 708px;
overflow-y: 670px;
background: url('images/big_text.png');
background-repeat: no-repeat;
background-attachment: fixed;
}
感谢,但我有具有不同图像的所有的1600 * 750和三个固定的图像应用为前景,并在相同的位置上我用类到多个div.so所有背景图像上的多个格调用多个div上的所有三个图像,所以我不能用它作为背景图像 – dippune