html - Safari 不会在 <div> 中显示背景图像

Question

我似乎无法在 Safari 中显示背景图像。它适用于 IE 和 Chrome。我尝试了几个带有 -webkit 前缀的替代方案，但没有成功。

    <style type="text/css">

        h1, h2, h3, h4, p {position: relative; z-index: 10;}

        .jumbotron {
            position: relative;
            z-index: 3;
        }

        .jumbotron:after {
            background: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.5)), url('img/carousel_island.png');
            bottom: 0;
            content: "";
            display: block;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
        }


    </style>

这是 HTML:

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
        <div class="container">
            <h1><strong>Welcome to Pepi's Island</strong></h1>
            <h3><strong>A place for kids to emotionally and socially learn and grow.</strong></h3>
            <br>
            <p><a class="btn btn-success btn-lg">Learn more &raquo;</a></p>
        </div>
    </div>

Answer 1

Safari 在使用简写 background 样式时存在一些已知的错误；作为单独 CSS 样式支持的某些功能在单个 background 样式中一起使用时将无法工作。

我不确定您在这里使用的样式是否会受到影响，但值得一试(我知道它会影响 background-sizing 等)。

因此，我建议将您的 background 样式拆分为单独的样式:

background-color: linear-gradient(rgba(255,255,255,1), rgba(255,255,255,.5));
background-image: url('img/carousel_island.png');

希望有帮助。