Question

我在SquareSpace上创建我的网站，我感到非常沮丧。我喜欢有一个背景（方形空间为用户提供没有代码的东西），并喜欢在文本所在的背景部分有一些半透明的封面。我认为它叫做叠加（？）。 Squarespace允许用户添加CSS代码。我不知道该怎么做。我试图谷歌，youtube等等，但我似乎无法找到如何做到这一点。有人能帮我吗？我真的很感激。我花了很多时间试图解决这个问题。我想做的是这样的事情（http://blog.squarespace.com）。有背景，顶部有半透明，覆盖背景的一部分。

Answer 1

添加div，将其设置为position: fixed，将所有位置值（top，bottom，left和right）放在{{ 1}}，并给它一个0背景。

请注意，这会使其下的任何内容都无法点击（除非您同时给它rgba()）。

<强> Here is a jsFiddle example of the concept.

Answer 2

Madara Uchiha的回答将涵盖整个可见窗口，而不仅仅是其中的一部分。它也无法在某些移动设备上运行（iirc，Android WebKit不支持position: fixed）。

更好的建议是做类似以下的事情......

HTML：

<div class="wrapper">
    text
    <div class="overlay"></div>
</div>

CSS：

.wrapper
{
    position: relative;
    display: inline-block; /* You could alternatively float the div, this is just to get it to fit the text width */
    z-index: 0; /* Not strictly necessary, but establishes its own stacking context to make it easier to handle compound/multiple overlays */
}

.overlay
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 255, 0.5);
    z-index: -1;
}

JSFiddle显示以前的版本，文本受叠加影响，当前版本不支持文本（并且不需要使用pointer-events: none）：http://jsfiddle.net/LGq8f/1/

当然，如果您不希望对内部div提供的叠加区域进行精细控制，则可以使用display: inline-block或float: left / float: right加上alpha值背景颜色，在文本换行div上，跳过叠加div。

如何做半透明叠加

2 个答案: