Question

它们以红色突出显示。这些是我PSD中的透明图像。

我应该这样做：

<div class="left-div"><img src="food_img1.ong"/></div>
<div class="inner-div">Here goes main container</div>
<div class="right-div"><img src="food_img2.ong"/></div>

还是有更好的方法吗？提前致谢。我是PSD-2-HTML的新手，所以非常感谢您的支持。

Answer 1

您可以将一个div与一个图像一起使用，将div放在具有绝对位置的body中。

<body>
<div class="image_div"></div>
<div class="container">
  <div class="content"></div>
</div>
</body>

.container{
  width:500px;
  height:300px;
  margin:0 auto;
  background:red;
  position:relative;
  z-index:2;
}
.image_div{
  width:100%;
  background-color:blue; //use background-image:(image.png);
  background-repeat:no-repeat;
  background-size:cover; //optional
  background-position:50% 50%; //optional
  height:300px;
  position:absolute;
  z-index:1;
}

JSFiddle

如果我的容器两侧有两个图像，我应该创建3个div吗？

1 个答案: