背景图像的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;
}

我需要箭头显示现在。它始于＆＃34; home top＆＃34; div并指向＆＃34;精选页面 - 高级-2＆＃34;部分。这就是为什么我添加了＃34; home full＆＃34;带箭头背景的div。

我的问题：我的小部件（标题和按钮）不再可点击。 z-index导致＆＃34; home-full＆＃34; div在前面。

有没有办法解决这个问题？我花了整个下午的时间：）

谢谢！ 斯特凡

Answer 1

不是将箭头添加到home-full div而是使用：before或：after将箭头添加到“home-top widget-area”div并相对于此父级给出位置并删除z-index：-9999px来自.site-inner 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部分后面，则尝试在以下内容中增加z-index：在css代码之后

Answer 2

我无法通过小提琴这么做，所以我使用萤火虫进行了这些更改，这与我上面提到的相同，箭头显示请通过它也许你错过了一些东西，请叫我Ameen：）< / p>

Answer 3

你试过这个：

background-size : cover

background-size属性指定背景图像的大小。语法：

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

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