Question

我目前有一个包含背景图像的超大屏幕，我希望当用户滚动它时图像会慢慢变暗。

这是我的HTML

    <div class="jumbotron">
        <div class="container">
            <h1> Insert Welcome Text Here </h1>
            <p> Insert description text here.</p>
        </div>
    </div>

这是我的CSS

.jumbotron
{
    height: 800px;
    background-image: url("assets/goodes.jpg");
    background-repeat:no-repeat;
    background-size: cover;
}

.jumbotron .container
{
    position: relative;
    top: 200px;
    text-align: center;
}

.jumbotron h1
{
    color: #fff;
    font-weight: bold;
    font-size: 48px;
    font-family: 'Shift', sans-serif;
}

.jumbotron p
{
    color: #fff;
    font-size: 20px;
}

如果您可以告诉我如何通过窗口调整图像大小，可以获得奖励积分。

Answer 1

包含动画转换（demo）

guid

CSS

<div class="jumbotron">
  <div class="bg-overlay animated">
     <div class="container">
        <h1> Insert Welcome Text Here </h1>
        <p>Insert description text here.</p>
     </div>
  </div>
</div>

Answer 2

您可以在jumbotron之后和内容之前添加背景叠加div。在jumbotron悬停时，使用rgba（0,0,0,0.5）设置叠加层的背景，其中0.5为50％alpha

<div class="jumbotron">
    <div class="bg-overlay">
        <div class="container">
            <h1> Insert Welcome Text Here </h1>
            <p>Insert description text here.</p>
        </div>
    </div>
</div>

然后添加一个css规则

.jumbotron:hover .bg-overlay {
    height: 100%;
    background: rgba(0,0,0,0.5);
}

（Demo）

使用bootstrap 3.0在悬停时使一个jumbotron背景图像变暗

2 个答案: