Question

我似乎无法在css中显示背景图像。和我似乎无法使用div背景显示任何颜色

#mlogo {
    background-image: url(/mobileimages/2015LOGOFB.jpg);
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
    position: relative;
    width:100%;
    text-align:center;


}


#mwrap {
    background-color: black;
    position: relative;
    width:100%;
    text-align:center;
    overflow:hidden
}



#mindex {
    background-color:black;
    position: relative;
    width:100%;
    text-align:center;
    border-style: solid;
    border-width: 1px;
    border-color: #a1a1a1;

}

我知道浏览器至少被链接到一些css，因为我正在使用（mindex）的一些文本正确显示。这些是喜欢使用的div。

<div id="mwrap">

<div id="mlogo" align="center">

</div>

<div id="mindex" align="center">
<p id="menu1">Photo And Video</p>
</div>

<div id="mindex" align="center">
<p id="menu1">Scores</p>
</div>

<div id="mindex" align="center">
<p id="menu1">Standings</p>
</div>


</div>

为已经存在的桌面网站创建单独的移动网站。我已经在android（galaxy 4）和iphone 6上查看了我的代码。两个显示都是不同的。

我无法理解为什么图像不会显示为div的背景，我无法理解为什么我不能将整个网站的背景颜色设置为黑色。 img将显示如果我在html中使用<img src"">但不是如果我将它添加到div框的css我用来定义网站的不同部分

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mobilesummer.css">
 <title>SSL 2015</title>

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

</head>

这是我的头标记

我迷失在这一个......简单的事情，我正在制造复杂的？

Answer 1

您无法看到背景图片，因为带有div ID的#mlogo没有height。尝试给它一个400px

的高度

如果您想将整个网站的背景设置为黑色，请使用此CSS -

body {
  background-color: black;
}

更新：

这是我制作的pen，我使用了示例图片并将红色border应用于#mindex

Answer 2

div上没有高度，因此div不会包含在内容中（如果有意义的话）。

你也可以删除position：relative并添加float：left;宽度：100％;这将使div能够根据内容进行高度扩展，如果你不需要看起来像你不喜欢的相对属性那么。

希望有所帮助。

是否有一组不同的MOBILE css / html规则

2 个答案: