Question

我在background-image上有一个全屏html，就像

一样

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个{ {1}}表格内容浮动在其上。

问题是如何将background-image伸展到body的宽度？

我尝试将html提供给身体和不同位置的html和身体，但这没有帮助。

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作为background元素html声明的一部分：

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

您可能希望在实施前检查browser support。

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解决方案很好，但您只需在z-index: -1上添加body:before。

另一方面，为什么只要使元素可滚动，为什么要使页面成为可能的scrolable。就在桌子旁边。

这样的事情：

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

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

我的建议是像在codepen中显示的那样。

如何使body元素的宽度拉伸到html的宽度？

4 个答案: