背景圖像的Z索引

Question

在此網站上： http : //www.effic.be/wordpress/

我有一個箭頭指向首頁上的第一個小部件。

這是代碼：

1. HTML

<div class="home-full">
    <div class="home-top">
        <div class="site-inner">
            <div class="wrap">
                <div class="home-bottom">
                    <section id="featured-page-advanced-2">Widget 1 content</section>
                    <section id="featured-page-advanced-3">Widget 2 content</section>
                    <section id="featured-page-advanced-4">Widget 3 content</section>
                </div>
            </div>
        </div>
    </div>
</div>

2. CSS

.home-full {
    background-image: url(/wordpress/wp-content/themes/enterprise-pro/images/arrow.png);
    background-position: 36% 47%;
    background-repeat: no-repeat;
}

.site-inner {
    position: relative;
    z-index: -999999;
}

.home-bottom {
    position: relative;
    z-index: 999999;
}

我需要箭頭顯示現在。 它從“ home top” div開始，並指向“ featured-page-advanced-2”部分。 這就是為什么我用箭頭背景添加“ home full” div。

我的問題：我的窗口小部件（標題和按鈕）不再可單擊。 z索引使“ home-full” div位於前面。

有辦法解決嗎？ 我花了整個下午時間：)

謝謝！ 斯特凡

Answer 1

而不是使用：before或：after將箭頭添加到“ home-top widget-area” div中，而不是將箭頭添加到home-full div區域中，並給出相對於此父對象的位置，並從中刪除z-index：-9999px。網站內部div

home-top widget-area{
    position:relative
}

home-top.widget-area:after{
    position:absolute;
    bottom:0;
    left:55px;
    content:'';
    background:url("/wordpress/wp-content/themes/enterprise-pro/images/arrow.png") no-repeat;
    width:57px;
    height:101px;

    }

如果箭頭仍然隱藏在較低的div部分后面，請嘗試在：after css代碼中增加z-index

Answer 2

我無法通過撥弄來完成，所以我使用螢火蟲進行了這些更改，這與我上面提到的相同，並且箭頭顯示了請通過它，也許您錯過了一些內容，請給我打電話：Ameen :)

Answer 3

您是否嘗試過這個：

background-size : cover

background-size屬性指定背景圖像的大小。 句法 ：

background-size: auto|length|cover|contain|initial|inheri

文件： http : //www.w3schools.com/cssref/css3_pr_background-size.asp