php - 是什么阻止了我的标题图像加载

Question

我有一段时间看不到我的标题图片了。我曾尝试为移动设备和非移动设备设置单独的 header 。我正在使用这段代码(我现在使用/**/将它放在注释中)。

    /* @media screen and (max-width: 600px) {
 .custom-header { background: url("https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg") no-repeat; width: 100%;
            background-size:contain;
    }


}

@media screen and (min-width: 601px) {
 .custom-header { background: url("https://i1.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg") no-repeat; 
        width: 100% ;
                        background-size:contain;


    }
} */

我尝试回到更简单的方法，即执行自定义 -> 标题图像并以这种方式选择标题。那也不再起作用了。

看来我的 Bootstrap 代码有问题，我对 Bootstrap 很陌生，但被建议使用它。

我的网站是 www.rosstheexplorer.com

当设备宽度大于 601px 时我希望发生以下情况

• 我不希望菜单和自定义标题
• 我不希望上面有任何空间客户标题
• 我不希望页面上的 H1、插件或任何其他内容与客户标题重叠
• 我不希望客户 header 的左侧或右侧有任何空白
• 我希望始终能够看到整个文本“Ross The Explorer”，我不想删除最后一个 R

在 header.php 我有

<?php wp_head(); ?>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


</head>

我尝试删除以下代码以查看是否会有所不同，但我的 header 仍然没有加载。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

有人可以提供建议吗？

Answer 1

我会把它作为评论发布，但我还不能发表评论。

之所以看不到图像，是因为您将其设置为 div 的背景，而不是实际的 html 对象。

为了看到那个div的背景，它需要有一个定义的高度。

您的 .custom-header div 具有 1500px 的指定 width 但没有指定 height 这就是您看不到它的原因。

有很多方法可以解决此问题，但由于您对标题有特定要求，我建议您只将标题本身添加为图像

<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">

这并没有解决所有问题，但话又说回来，我只是想将其作为评论。

---

更新:

为了添加媒体查询来控制 header ，您可以将类添加到 img 标记。然后，您可以使用类(在我的示例中为 .header-image - CSS 中的选择器)来添加您的媒体查询。

请看下面的代码:

.header-image {
//** CSS for devices BIGGER than 660px goes here **/
}

@media screen and (max-width: 660px) {
    .header-image {
        //** CSS for devices SMALLER than 660px goes here **/
    }
}

<img class="header-image" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">