Question

我正在尝试将一个插入框阴影添加到Bootstrap3网站中的mapbox-div。问题是，当页面加载然后消失在地图后面时，阴影会显示1秒钟。

知道如何将阴影推到前面吗？

这是我的 CSS ：

#section1-wrapper {

    position:relative;
    height: 400px;  
}

#section1-container {

    background-color:black;
    background: rgba(0, 0, 0, 0.5);

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 30px 2px rgba(0,0,0,0.75);

    margin-top: 50px;

    color: #fff;
    height: 300px;
    position:relative;
    z-index: 1;
}

#map { 
    position: absolute;
    top:0;
    bottom:0;
    height: 100%;
    width:100%;
    z-index:0;

    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
}

HTML ：

<!-- Section1 -->

    <div class="row" id="section1-wrapper">    

        <div id="map"></div> 

        <div class="container" id="section1-container">

            <div class="col-xs-12 col-sm-12 col-md-12">

                <br />
                <br />

                <h1 class="text-center">Ipsum Lorum. <br /><br /> Ipsum Lorum.</h1>

                <br />
                <br />

            </div>

            <div class="row text-center">

                <div class="col-xs-12 col-md-4">
                    <address>
                        <strong><abbr title="Telefono">T:</abbr> 777777777</strong
                    </address>
                </div>
                <div class="col-xs-12 col-md-4">
                    <address>
                        <strong><abbr title="Mail">M:</abbr> <a href="mailto:#">info@eample.com</a></strong
                    </address>
                </div>
                <div class="col-xs-12 col-md-4">
                <address>
                        <strong><abbr title="Dirrecion">D:</abbr> any street</strong
                    </address>
                </div>


                <br />
                <br />
                <br />
                <br />

            </div>
        </div>

    <!-- Section1 End -->
    </div>

的JavaScript ：

<script src="//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js"></script>

     <script>
        var map = L.mapbox.map('map', 'examples.map-9ijuk24y', {
        scrollWheelZoom: false,
        zoomControl: false})
        .setView([40, -74.50], 9);

    </script>

Answer 1

将阴影添加到:before伪元素或空div。对于万无一失的z-index，您还可以将地图包装在一个额外的div中。

#map {
   position: relative;
   z-index: 0;
}

#map > .map-wrapper {
    position: relative;
    z-index: 5;
}

#map:before {
    content: '';
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 10;
    pointer-events: none;

    -webkit-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.75);
}

这使用pointer-events: none;，这意味着它无法在IE11下运行。但实际上没有办法以不会阻止点击事件的方式将元素添加到另一个元素之上。您可以将阴影分成四个不同的容器，并将它们放在顶部，左侧，右侧和底部。但是如果没有指针事件，阴影下的区域仍然是不可点击的。

您可以使用像Modernizr这样的图书馆来检查功能，然后只添加阴影。但是为此添加另一个库有点过分了。

Answer 2

这不是最好的解决方案，但对我有用

在地图中设置插入阴影

document.getElementById（＆＃39; map＆＃39;）。childNodes [0] .childNodes [0] .childNodes [2] .style.boxShadow =＆＃39; inset 0 0 150px＃000000＆＃39 ;;

在所有浏览器中谷歌地图API以上述方式生成地图div

如何在mapbox-div中添加内嵌框阴影？

2 个答案: