Question

我正在使用bootstrap框架。在我的网络应用程序中，我使用两个具有背景图像的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（提到width-attribute）显得不同。在15＆＃34;屏幕，内部div接触外部图像中的杯子，而在13＆＃34;屏幕它不接触杯子。我希望页面在所有浏览器上显示相同。除了使用两个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

＆＃13;

.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;
}

＆＃13;

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

2 个答案: