如何在Yii2 Advanced Template上添加超大背景圖像效果

Question

我正在嘗試在這篇文章中從Skelly用戶那里獲得如下示例所示的效果： https : //stackoverflow.com/a/20920731/5328266

這就是我現在所做的：

AppAsset.php：

<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

namespace frontend\assets;

use yii\web\AssetBundle;

/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'css/site.css',
    ];
    public $js = [
        'javascript/jumboHeight.js'
    ];
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

和一個文件夾，其中包含如下所示的javascript文件：

var jumboHeight = $('.jumbotron').outerHeight();
function parallax(){
    var scrolled = $(window).scrollTop();
    $('.bg').css('height', (jumboHeight-scrolled) + 'px');
}

$(window).scroll(function(e){
    parallax();
});

這是我的Index.php ：

<div class="site-index">
    <div class="bg"></div>
    <div class="jumbotron">
        <div class="container">
            <blockquote class="pull-left">
                <header class="pull-left text-primary">News</header>
                <br>
                <comment>Setting up Website</comment>
            </blockquote>
            <br>

            <h1>Congratulations!</h1>

            <p class="lead">You have successfully created your Yii-powered application.</p>

            <p><a class="btn btn-lg btn-success" href="http://localhost/yii/frontend/web/index.php?r=projects%2Fcreate">Starting
                    a Project !</a></p>
        </div>
    </div>

和CSS：

html,
body {
    height: 100%;
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    height: 350px;
    color: white;
    text-shadow: #444 0 1px 1px;
    background:transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

.bg {
    background: url('/frontend/web/images/header.jpg') no-repeat center center;
    position: fixed;
    width: 100%;
    height: 350px; /*same height as jumbotron */
    top:0;
    left:0;
    z-index: -1;
}

但是在該jombotron上顯示圖片有問題，這是它的外觀：

那么，問題出在哪里呢？

任何建議我都會感激。

Answer 1

嘗試以下代碼：

.jumbotron {
    background-color: transparent !important;
    background-image: url("image.jpg") !important; 
}