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

使用简写background样式时，Safari有一些已知的错误;单个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白色。尝试将“background-color：red”添加到CSS中，您将看到问题所在。

修改

发布后的几秒钟，我意识到在野生动物园实际测试它之前是多么愚蠢，不好。

我可以确认它在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;
}

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

3 个答案: