Question

我有一个可以在html中左右滚动的页面。

我不想那样。

我想要的是我的杯子，书中可以看到没有滚动和中间的背景图像。

  <div class="container maindiv " >    
    <img class="img-responsive book" src="http://i.imgur.com/dLCTiyn.png">
    <img class="img-responsive cup" src="http://i.imgur.com/AULhYEH.png">
  <div class="black_bg">
    <ul class = "menudiv">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
  <div class= "para">
   <p>
     lorem ipsum
   </p>    
   <p>
     lorem ipsum
   </p> 
   <p>
     lorem ipsum
   </p> 
   <p>
     lorem ipsum
   </p> 
 </div>    

    <div class= "para1">
   <p >
     lorem ipsum
   </p>    
   <p>
     lorem ipsum
   </p> 
   <p>
     lorem ipsum
   </p> 
   <p>
     lorem ipsum
    </p> 
 </div>     
 </div> <!--black_bg-->
</div>

杯子和书籍图像位于背景图像的右侧和左侧。

这里是fiddle的相同内容。

请建议。

Answer 1

在CSS上尝试这个类：

.cup{
    height:167px;
    position:absolute;
    left:0;
    top: 134px;
    z-index:1000;
}

.book{
    height: 167px;
    position: absolute;
    right:0;
    top: 134px;
    z-index:1000;
}

Answer 2

可能是这样的，你必须对这两个图像使用position:fixed，并将它们有效left和right position作为：

.cup{
     height: 167px;
     position: fixed;
     //left: -158px;
     top: 134px;
     z-index: 0;
 }

.book{
      height: 167px;
      position: fixed;
      right: 0px;
      top: 134px;
      z-index: 0;
 }

这是工作演示

<强> DEMO

Answer 3

这是你在找什么？

https://jsfiddle.net/tL9raxfL/13/

.cup{
 height: 167px;
position: fixed;
//left: -158px;
top: 134px;
z-index: 0;
}

.book{
 height: 167px;
position: fixed;
right: -200px;
top: 134px;
z-index: 0;
}

在html中有全宽主页

3 个答案: