【问题标题】:different background image on each page of mobile site?移动网站的每个页面上的不同背景图片?
【发布时间】:2012-09-06 23:45:59
【问题描述】:

目前,我正在使用这段代码来调用静止图像背景,而不是在常规站点上播放的视频:

media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
         html{
           background: url('img/background.jpg') no-repeat center center fixed !important;
           background-size: cover;
           height: 100%;
         }
}

我想为每个页面使用不同的图像,我该如何实现?

谢谢。

【问题讨论】:

    标签: css image mobile background-image


    【解决方案1】:

    如果您为每个页面的正文标记提供不同的 ID,则可以使用不同的图像定位每个页面:

    HTML:

    <body id="homepage">
    
    <body id="about">
    

    等等……

    然后,在您的媒体查询中,CSS 将是:

    body#homepage {
        background-image: url('img/homepageBackground.jpg');
    }
    
    body#about {
        background-image: url('img/aboutBackground.jpg');
    }
    

    【讨论】:

    • 这是一个 Wordpress 网站这一事实是否会改变这一点? &lt;body&gt; 标签位于页眉中,在所有页面中通用。
    • 我不明白为什么这会限制你...我发现这篇文章 wordpress.org/support/topic/change-background-by-page-id 使用 Wordpress 的 body_class() 方法为 body 标记提供标识符
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-19
    • 1970-01-01
    • 2019-02-07
    相关资源
    最近更新 更多