Html 普通版背景，手机版背景颜色

我想让我的网站移动。我有两个css文件，一个用于移动版本，一个用于普通版本。将它们放在我的HTML文件的头部是不起作用的，因为普通版本的背景干扰了移动版本，所以移动版本根本不起作用。css代码完全不同。那么，有没有人知道我如何在普通版本中有背景，而移动版本中有背景色的情况下，制作我的sitw手机

这是正常版本css的代码：

<link rel="stylesheet" href="index.css" charset="utf-8">
<link rel="stylesheet" href="mobile.css" charset="utf-8">

body {
padding: 0px 20px 0px 20px;
}

p {
background: rgba(0, 0, 0 ,0.6);
}

.index{
 background-image: url("index.png");
 background-size: 100%;
 background-color: black ;
 font-family:'Coming Soon', cursive;
 font-size: 17px;
 color: white;

}
.JM{
background-image: url("jeffersonmanor.jpg");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.TV{
background-image: url("thevilla.png");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.PS{
background-image: url("psychoshock.jpg");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.HH{
background-image: url("hauntedholidays.png");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

.TC{
background-image: url("theclinic.jpg");
background-size: 100% ;
background-color: black ;
font-family:'Coming Soon', cursive;
font-size: 17px;
color: white;
}

div.menubar > ul {
list-style-type: none;
margin: 0;
background-color:rgba(191, 0, 0, 0.4);
color: #fff ;
}

a.link {
color: yellow
}

div.menubar > ul > a > li {
display: inline-block;
padding: 15px;
overflow: hidden;
color: white;
}

div.menubar > ul > a > li:hover {
  background-color: #737373;
}

#index:active {
transform: scale(0.6);
transition-duration: 0,2s ;

}

#JeffersonManor:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}


#TheVilla:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

#PsychoShock:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

#HauntedHolidays:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

#TheClinic:active {
transform: scale(0.6);
transition-duration: 0,2s ;
}

::selection {
background: #ee2c2c ;
}

::-webkit-selection {
background:  #ee2c2c ;
}

::-moz-selection {
background: #ee2c2c;
}

---

试试这个简单的媒体查询

正文{
背景：#00ff00 url(http://i1.wp.com/static.web-backgrounds.net/uploads/2012/08/City_Landscape_Background.jpg)无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
背景色：#fff；
}
@仅介质屏幕和（最大宽度：500px）{
身体{
背景：#00ff00；
}
}

---

请测试它以减小屏幕大小。

如果您想在第三个css文件中包含两个css文件，您应该以不同的方式进行，但与“HTML样式”不同。

您的css文件

normal\u版本。css

应以以下内容开头：

@include url('index.css');
@include url('mobile.css');

---

这是另一个解决方案。使用正确的媒体查询标签

@media (max-width: 500px){
  body {background-image: none; background-color: black;
  margin: 30px 2px 30px 2px;
  padding: 0px 20px 0px 20px;
  font-family:'Coming Soon', cursive;
  font-size: 15px;
  color: #af111c;
  }
 .index {
        background-image: none;
        }

  head {
       font-family:'Coming Soon', cursive;
       font-size: 15px;
       color: #af111c;
       }
}

---

为什么要使用两种样式，您可以使用一种样式并使用手机媒体查询您需要覆盖媒体查询中包含背景图像的类-例如在媒体中包含

.index{background image:none；}

您想保留桌面和手机屏幕的背景图像吗？我想在普通版本上保留背景，但在手机版本上保留背景颜色。您好，我编辑了我的答案检查一下，我想您需要的是完全相同的！

@include url('index.css');
@include url('mobile.css');

@media (max-width: 500px){
  body {background-image: none; background-color: black;
  margin: 30px 2px 30px 2px;
  padding: 0px 20px 0px 20px;
  font-family:'Coming Soon', cursive;
  font-size: 15px;
  color: #af111c;
  }
 .index {
        background-image: none;
        }

  head {
       font-family:'Coming Soon', cursive;
       font-size: 15px;
       color: #af111c;
       }
}