Question

我一直无法看到我的标题图片。我试图为移动设备和非移动设备分别设置标头。我正在使用此代码（我现在使用/ ** /将其放在注释中）。

    /* @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;


    }
} */

我尝试恢复更简单的方式来进行自定义 - ＆gt;标题图像并选择标题。那也不行了。

看起来我的Bootstrap代码有问题，我对Bootstrap非常不熟悉，但建议使用它。

我的网站是www.rosstheexplorer.com

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

我不希望菜单和菜单之间有任何空间自定义标题
我不希望它上面有任何空间客户标题
我不希望H1，插件或页面上的任何其他内容与客户标题重叠
我不希望客户标题的左侧或右侧有任何空白区域
我希望始终能够看到整个文本'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>

我尝试删除以下代码以查看是否会产生影响，但我的标题仍未加载。

<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的背景，需要定义height。

您的.custom-header div指定width 1500px但未指定height，这就是您无法看到的原因。

有很多方法可以解决此问题，但由于您对标题的具体说明，我建议您只将标题添加为图像

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

这并未解决所有问题，但我再次将此作为评论。

<强>更新

要添加媒体查询以控制标题，您可以向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">

Answer 2

我现在已经解决了这个问题。感谢您的帮助

我有两个标题图片，一个用于移动设备。我有与header.php和附加CSS中的标题图像相关的代码。

在header.php中，代码是

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>


<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">


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

在其他CSS中，代码是

@media screen and (min-width: 661px) {
    .mobile-header-img {
        display: none;
        width: 100%;
    }
}

@media screen and (max-width: 660px) {
    .header-img {
        display: none;
    }
}

我现在的问题是让标题延伸到整个页面。您可以在Increasing The Width Of Your Header了解该问题。

什么是防止我的标题图像加载

2 个答案: