如何使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

这样，整个页面不必滚动，因为如果表格上方或下方有一些内容，可能会引起问题。 它只会消失在左边。 看起来很难看。

我的建议是像代码笔所示那样进行操作。