带有背景图像的嵌套div-浏览器兼容性问题

Question

我使用的是引导程序框架。在我的网络应用程序中，我使用了两个都有背景图像的div。

这是我的HTML代码

<div class="abc">
 <div class=" container abcd">
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
    <p style="color:white">abc</p>
 </div>
</div>

这是我的CSS代码

.abc{
  position:relative;
  background-image:url("http://i57.tinypic.com/1zl3a0z.png");
  background-size:cover;
  background-repeat:no-repeat;
 }
.abcd{
  width:200px; 
  background-image:url(" http://i62.tinypic.com/347b4vs.png ");
  box-shadow: 0 0 25px #000;  
  border: 6px solid white;
  position:relative;
  top:5px;
 }

这是JSfiddle

根据屏幕的大小，内部div（提到宽度属性）显示不同。在15英寸屏幕上，内部div触摸外部图像中的杯子，而在13英寸屏幕上它不触摸杯子。我希望该页面在所有浏览器上显示相同。除了使用两个div，还有其他方法吗？我认为内部div的宽度会根据不同的屏幕大小产生问题。

Answer 1

问题是外部图像会随着大小而缩放，但内部图像不会。您可以通过使用百分比宽度而不是固定宽度来解决此问题。例如width: 40%;而不是width: 200px;:

.abcd {
    width: 40%; 
    background-image: url(" http://i62.tinypic.com/347b4vs.png ");
    box-shadow: 0 0 25px #000;  
    border: 6px solid white;
    position: relative;
    top: 5px;
}

还有一个小提琴的例子：http://jsfiddle.net/cptehowa/3/

Answer 2

更新css

.abc {
    position:relative;
    background-image:url("http://i57.tinypic.com/1zl3a0z.png");
    background-size:cover;
    background-repeat:no-repeat;
    min-height:500px;
}
.abcd{
    width:200px; background-image:url(" http://i62.tinypic.com/347b4vs.png ");box-shadow: 0 0 25px #000;  border: 6px solid white;position:relative;top:5px;
}