Question

我在网站上设置了一个非常大的背景图片。这是我的代码：

body{
background-image: url(../images/front/bg.jpg);
background-position: center center;
background-size:cover;
padding:0;
margin:0;
width:100%;
height:100%;
}

当选择一个元素来显示其文字或图像时，我想在其上创建一个非常光滑的黑色窗帘。请查看此ADDRESS进行演示。当您单击任何菜单时，背景会变暗。我该如何实现呢？

Answer 1

您可以将伪元素用于正文，如下所示：

html, body
{
    height: 100%;
}

body
{
    background-image: url(http://www.placehold.it/1000x800);
    background-size: cover;
    background-attachment:scroll;
    position: relative;
}

body.dark:after
{
    position: absolute;
    content: "";
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color: rgba(0,0,0,0.3);
    z-index:-1;
}

这是一个演示 http://jsfiddle.net/NicoO/sv4yu/

此处编辑是使用CSS过渡的版本：http://jsfiddle.net/NicoO/sv4yu/1/

body:after
{
    transition-duration: 0.5s;
    background-color: rgba(0,0,0,0);
    position: absolute;
    content: "";
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
}

body.dark:after
{
     background-color:rgba(0,0,0,0.3);
}

您也可以只对伪元素的opcacity进行转换。

Answer 2

怎么样：

HTML：

<body>
    <div></div>
</body>

CSS：

body{
    background-image: url(../images/front/bg.jpg);
    background-position: center center;
    background-size:cover;
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}

body > div {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background: #000;
    opacity:0.4;
}

您可以将您的内容放在正文中，使用top:0 left:0放在另一个div中。使用opacity属性，您可以创建转换。这会有用吗？

Answer 3

他们在网站上所做的工作是使用this image

交换this one

这可以通过jQuery实现，例如：

$('img').attr('src','newImg.jpg');

可能是css过渡以减缓效果

如何使背景变暗？

3 个答案:

HTML：

CSS：