如何使body元素的寬度延伸到html的寬度？

Question

這里是SSCCE的JSFiddle。

我在html上有全屏background-image ，例如

html {
    background: url(flowers.png) no-repeat center center fixed;
    background-size: cover;
}

我將background-color應用於body ，其值具有一定的透明度，如下所示：

body {
    background-color: rgba(255, 255, 255, 0.75);
}

這樣，作為頁面的整體外觀，背景中有一幅圖像通過半透明（半透明）覆蓋層（主體的背景顏色）進行窺視。

然后，主體包含一個表，該表具有許多列，因此可以進行水平滾動。

問題在於，當用戶水平滾動時，我們看到body background-color的疊加層以視口結束，此后是裸html的background-image ，表內容在其上浮動。

問題是，如何使body伸展到html的寬度？

我嘗試將width:100%為body，將html和body設置為不同位置，但這無濟於事。

Answer 1

在CSS之下使用：

body {background:none}
body:before {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";}

Answer 2

作為替代解決方案，您可以將linear-gradient用作html元素的background聲明的一部分：

html {
    background: linear-gradient(rgba(255,255,255,0.75), rgba(255,255,255,0.75)),
                url(flowers.png) no-repeat center center fixed;
    background-size: cover;
}

您可能希望在實施之前檢查瀏覽器支持 。

Answer 3

給出主體的background-color ，並在table添加該屬性

.mdl-data-table {
    background-color: rgba(255, 255, 255, 0.75);
}
or in this css
.panel-h
    background-color: rgba(255, 255, 255, 0.75);
{

Answer 4

@Shivas解決方案很好，但是您只需在body:before上添加z-index: -1 。

另一方面，當只允許元素滾動時，為什么要使頁面水平可滾動。 只是桌子。

像這樣：

https://codepen.io/ivandoric/pen/PRLKXJ

這樣，整個頁面不必滾動，因為如果表格上方或下方有一些內容，可能會引起問題。 它只會消失在左邊。 看起來很難看。

我的建議是像代碼筆所示那樣進行操作。