html - Safari 不显示背景图片

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');

希望有帮助。

Answer 2

对于我的简单测试，它确实出现了，但你的背景是从白色到 0.5 alpha-white。尝试在 CSS 中添加“background-color: red”，你会发现你的问题。

编辑：

发布它几秒钟后，我意识到在 safari 上实际测试它之前它是多么愚蠢，我的错。

我可以确认它在 win7 上的 safari 5.xx 中不起作用。但这对我有用，你能测试一下它是否也对你有用吗？

.jumbotron:after {
  background-image:url('img/carousel_island.png');
}

如果没有，我想到了更多的想法（只是长远的猜测）：

1. mobile safaris have a limitation of 3MP or 5MP for PNG images
2. case of letters
3. try `./img/carousel_island.png`
4. A protocol restriction? Do you run it on a server or by `file://` or a `http(s)://` protocol?

Answer 3

尝试

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