Question

我在html代码中使用多个div。每个div将保存1600 * 750的图像。在每个div内部我都有固定的图像。这些图像将在每个div上重复我将这些图像称为每个div上的类。我的第一张照片是218 * 73 我的第二张照片是774 * 209 我的第三个是127 * 37

我想在我的背景div图像的137 * 88处修复我的第一个图像位置。第二个图像在655 * 339的背景div图像。第三张图像位于背景div图像的708 * 670处。

我不想用身体来修复背景图像，因为我在所有div上有三个修复图像的多个div。

任何人都可以告诉如何用css使用class来修复这些位置。提前致谢

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;

}

Answer 1

以下代码显示了图片大小和位置的示例：

＆＃13;

body {
    background-image:url('http://placehold.it/1600x750');
}
.first {
    background-image:url('http://placehold.it/218x73');
    border:1px dashed #000;
    display:block;
    height:73px;
    left:137px;
    position:absolute;
    top:88px;
    width:218px;
}
.second {
    background-image:url('http://placehold.it/774x209');
    border:1px dashed #000;
    display:block;
    height:209px;
    left:655px;
    position:absolute;
    top:339px;
    width:774px;
}
.third {
    background-image:url('http://placehold.it/127x37');
    border:1px dashed #000;
    display:block;
    height:37px;
    left:708px;
    position:absolute;
    top:670px;
    width:127px;
}

＆＃13;

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

＆＃13;

Answer 2

你能创建一个片段吗？ div没有关闭，第一个和c div在div＆＃34; a＆＃34; ？

<div id="a"> 
<div id="first" >
   <div class="c d" >

   This is my first div to display image.

html代码在不同位置的一个背景图像上的三个图像

2 个答案: