1

我正在 SquareSpace 上制作我的网站，我感到非常沮丧。我喜欢有一个背景（squarespace 为用户提供了无需代码即可完成的操作），并且喜欢在文本所在的背景部分放置某种半透明的封面。我认为它被称为覆盖（？）。Squarespace 允许用户添加 CSS 代码。我不知道该怎么做。我试图谷歌，youtube 等，但我似乎无法找到如何做到这一点。有人能帮我吗？我真的很感激。我花了很多时间试图弄清楚这一点。我想做的是这样的（http://blog.squarespace.com）。有背景，顶部有半透明覆盖部分背景。

4

2 回答 2

5

添加一个 div，将其设置为position: fixed，将其所有位置值（top、bottom和）设置为，left并为其设置背景。right0rgba()

请注意，这会使它下面的任何东西都无法点击（除非你也给它pointer-events: none）。

这是该概念的 jsFiddle 示例。

于 2013-07-09T19:41:53.340 回答
2

宇智波斑的回答将覆盖整个可见窗口，而不仅仅是其中的一部分。它也不适用于某些移动设备（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 给您的覆盖区域进行精细控制，您可以在文本环绕 div 上使用display: inline-blockor float: left/float: right加上 alpha 值的背景颜色并跳过覆盖 div .

于 2013-07-09T19:59:25.717 回答