如何在移动设备中更改背景图像

How to change background image in mobile?

本文关键字：背景 图像 移动      更新时间：2023-09-26

>我正在开发一个简单的带有背景图像的html页面。在桌面上，背景显示完美，但我正在尝试更改移动设备上的背景图像。

html 和 css 如下：

.HTML 

<div class="pc-img" ></div>
<div class="mobile-img" ></div>

.CSS

body
{
    margin:0px;
    padding: 0px;
}
.pc-img {
     min-height: 95% !important;
    height: 100%;
    width: 100%;
    background-image: url('http://www.laminaresearchcenter.com/images/comingsoon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;
}
}
.mobile-img
{
    display: none;
}
@media only screen and (max-width: 384px) {
.mobile-img
    {
         background: url('http://www.outbarga.in/images/comingsoon.jpg');
       visibility: visible;
}
.pc-img
{
    visibility: hidden;
}
}

你不需要 2 个类和 2 个div 来做到这一点。您可以为一个div 设置@media查询，并更改其属性。

.CSS： 

.pc-img {
  width: 100%;
  height: 400px;
  background: #000;
}
@media screen and (min-width: 100px) and (max-width: 480px) {
  .pc-img {
    background: purple;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .pc-img {
    background: yellow;
  }
}

查看此演示：演示 1

顺便说一句，如果你想要两个div，请制作这个：演示2

.pc-img {
  width: 100%;
  height: 400px;
  background: #000;
}
.device-img {
  background: steelblue;
  width: 100%;
  height: 400px;
}
@media screen and (min-width: 100px) and (max-width: 480px) {
  .device-img {
    display: block;
  }
  .pc-img {
    display: none;
  }
}
@media screen and (min-width: 480px) and (max-width: 768px) {
  .device-img {
    display: block;
  }
  .pc-img {
    display: none;
  }
}

您必须在媒体查询中为类提供display:block mobile-img pc-img类display:none

@media only screen and (max-width: 384px) {  
    .mobile-img
        {
           display: block;
           background: url('http://www.outbarga.in/images/comingsoon.jpg');
           visibility: visible;  
    }
    .pc-img {
         display: none;
    }

响应式页面

body
{
    margin:0px;
    padding: 0px;
}
.pc-img {
     min-height: 95% !important;
    height: 100%;
    width: 100%;
    background-image: url('http://www.laminaresearchcenter.com/images/comingsoon.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;
}
}
.mobile-img
{
    display: none;
}
@media only screen and (max-width: 384px) {
.mobile-img
    {
         background: url('http://www.outbarga.in/images/comingsoon.jpg');
       display: block;
}
.pc-img
{
    display: none;
}
}
<div class="pc-img" ></div>
<div class="mobile-img" ></div>

使用display:none和display:block属性代替visibility 

.mobile-img{display:none;}
@media only screen and (max-width: 384px) {  
.mobile-img {
   display: block;
   background-image: url('http://www.outbarga.in/images/comingsoon.jpg');
}
.pc-img {
  display: none;
}

让它background-image，而不仅仅是background 

@media only screen and (max-width: 384px) {
    .mobile-img
    {
       background-image: url('http://www.outbarga.in/images/comingsoon.jpg'); 
       visibility: visible;
    }
}
相关文章：