Question

我无法正确显示此图片。

我的网站设置宽度为940px，我希望保持这个宽度但是在这个范围内有一个div更宽并且溢出，这样你仍然可以在更大的显示器上看到它。

<div id="cinema-wrapper">
<div id="cinema-displays"></div>
</div>


#cinema-wrapper {
width:940px; 
height:764px;
}
#cinema-displays {
background-image: url(../mackbyte_files/img/cinema-bg.png);
height: 764px;
width: 3109px;
background-repeat: no-repeat;
position: absolute;
left:50%;
margin-left:-1554.5px;
overflow:visible !important;
}

这有点（有点），但我有两个问题。

它在safari中不起作用（chrome / firefox很好）
仅在右侧留下滚动选项。（例如，我可以向右滚动以查看溢出的图像。）

对于2，我只希望用户根据屏幕分辨率查看图像数量。

PS。我知道3109px对于网络和屏幕分辨率来说是巨大的，但是在我继续使用图像之前我正在进行修复以使其更小;但是，当我这样做时，我仍然会遇到这个问题。

Answer 1

什么控制内部div是否在影院包装器外可见是父母的溢出，你没有设置。所以，你应该做

#cinema-wrapper {
    width:940px; 
    height:764px;
    overflow:visible;
}

Answer 2

我也经历过这样的问题所以这是我的方法。

表示HTML：

<div id="cinema-wrapper">
    <div id="cinema-subwrapper">
        <div id="cinema-displays"></div>
    </div>
</div>

用于CSS：

#cinema-wrapper {
    width: 940px; 
    height: 764px;
    overflow: visible;
    position: relative;
}

#cinema-subwrapper {
    display: inline-block;
    position: relative;
    right: -50%;
}

#cinema-displays {
    background: url(../mackbyte_files/img/cinema-bg.png) center top no-repeat;
    height: 764px;
    width: 3109px;
    position: absolute;
    left: -50%;
}

希望这会有所帮助。：）

背景图像溢出不起作用

2 个答案: