Question

我想通过css加载背景图像，具体取决于@media关键字的显示分辨率。它在Firefox和Chrome中运行良好，但它在Safari中不起作用。有什么我想念的吗？

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="utf-8">
        <title>Snowboardschule: Skigebiet</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="/fileadmin/css/style.css?1496823820" media="all" title="main">

        <style type="text/css">@media(min-resolution: 1dppx){ .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}</style>
    </head>
    <body>
        <header>
            <div class="trailer">
                ...  
            </div>
        </header>
    </body>
</html>

Answer 1

尝试使用

<style type="text/css">
@media and screen (min-resolution: 1dppx)
  { .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}
</style>

在safari中不评估css样式标记

1 个答案: