Question

我正在寻找一种解决方案，使用HTML / CSS或jQuery或任何其他解决方案获得如下图所示的叠加层。

我想在我的网站上使用它作为背景图片的叠加层。

叠加层： Image

Answer 1

如果您想将其设置为您网站的背景，那就像在CSS文件中将其设置为：

html {
    background-image: url(http://oi61.tinypic.com/14o3c3k.jpg)
}

或通过jQuery设置它（你用jQuery标记你的问题，所以我假设你想知道如何这样做）

$("body").parent().css("background-image", "url(" + http://oi61.tinypic.com/14o3c3k.jpg + ")")
//you can also use $("html")… I've just seen cases where that failed for people

Answer 2

要重新创建与图片相同的效果，您可以使用具有3个透明像素和1个完全不透明的黑色像素的小2 x 2像素PNG图像（您可以使用图像我在下面的代码中使用过）。然后将此图像放在div中，以覆盖背景图像并对其应用透明度（叠加图像）：

这是CSS：

* {
    margin:0;
}
html, body {
    background:url("http://i.imgur.com/TBaaZJC.png");
}
.overlay {
    position:absolute;
    z-index:999;
    left:0;
    top:0;
    width:100%;
    height:100%;
    opacity:0.25;
    background:url("http://i.imgur.com/pVNSmP4.png");
}

以下是HTML：

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

JSFiddle

Answer 3

使用以下

case classes

* {
    margin:0;
}
body {
    background:url("http://www.conceptcarz.com/images/Citroen/2010-Citroen-Survolt-Concept-Image-01.jpg");
    background-attachment: fixed;
    background-position: center;
}
.bg-transparent {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: #fff;
    opacity: 0.4;
    filter: alpha(opacity=40)
}

在这里你可以找到一个小提琴：http://jsfiddle.net/erasad22/evc8x9hk/

图像叠加HTML / CSS

3 个答案: