是啥阻止了我的标题图像加载

Posted

技术标签:

【中文标题】是啥阻止了我的标题图像加载【英文标题】:What Is Preventing My Header Image Loading是什么阻止了我的标题图像加载 【发布时间】:2017-11-16 04:33:30 【问题描述】:

我已经有一段时间看不到我的标题图片了。我试图为移动设备和非移动设备设置单独的标题。我正在使用此代码(我现在使用 /**/ 将其放入 cmets 中)。

    /* @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、插件或页面上的任何其他内容与客户标题重叠 我不希望客户标题的左侧或右侧有任何空白 我希望始终能够看到整个文本'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>

谁能给点建议?

【问题讨论】:

值得注意的是,您应该将 wp_enqueue 用于脚本和样式,而不是 header.php 文件中的标签 【参考方案1】:

我会将此作为评论发布,但我还不能发布 cmets。

您看不到图片的原因是您将其设置为div 的背景,而不是实际的 html 对象。

为了看到那个div的背景,它需要有一个定义的height

您的.custom-header div 具有指定的width1500px,但没有指定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 **/
    
&lt;img class="header-image" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg"&gt;

【讨论】:

谢谢,现在我的问题是弄清楚如何将媒体查询合并到 header.php 中。我这里讲这个问题-***.com/questions/44552136/… 您可以向 img 标签添加类来实现这一点。检查上面的更新【参考方案2】:

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

我有两张标题图片,一张用于移动设备。我在 header.php 和 Additional 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 阅读有关该问题的信息。

【讨论】:

以上是关于是啥阻止了我的标题图像加载的主要内容,如果未能解决你的问题,请参考以下文章

是啥阻止了我的 ByteBuffer 释放?

使用 Swift 4 的 Codable 进行解码时,是啥阻止了我从 String 到 Int 的转换?

FMDB 阻止了我的 UI

Gmail 阻止电子邮件模板中嵌入的小型嵌入式图像

Azure AD B2C 登录 - “包含阻止加载的脚本错误”

SameSite cookie 被阻止