Question

无论我做什么，我都无法在.container div中获取我的图像，以便在使用CSS格式化时正确显示。仅显示图像的前~10％。如果我将img标记放在HTML中，它将完美地工作。但是我希望在CSS中进行格式化，而不是HTML格式，并且在这种情况下它首先是兼容移动设备。我想要的是图像居中并且比当前显示的图像更大。这是我的HTML：

<!DOCTYPE html>
<html lang="en-US">
<link rel="stylesheet" type="text/css" href="RABstyle.css">
<title>Home</title>
<meta charset = "UTF-8">
<meta name="author" content="Beth Bennett">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>

<div class="icons"><p>Icons</p></div>

<ul class = "buttons">
<button id="LogIn" type="button">Log In</button>
<button id="SignUp" type="button">Sign Up</button>
</ul>
</header>

<div class="container">
<h2 class="intro">America's source for....</h2>
<ul class="selector">
    <li class="active"><a href="#">Ds</a></li>
    <li><a href="#">Cs</a></li>
    <li><a href="#">Or</a></li>
</ul>
 </div>
</body>
</html>

这是我的CSS：

* {
box-sizing: border-box;
margin: 0px;
padding:0px;
font-family: Calibri, Helvetica, sans-serif;
}
body {
background-color:#ffffE0;
}
header {
background-color: #AA0000;
height: 75px;
padding: 15px;


}
.icons{
float: left;
margin-left: 100px;
}

.buttons {
text-align: right;
margin-right: 300px;

}
.container {
background: url("HomePageImageFinal.svg") no-repeat;
background-position: center top;
background-size: 1500px 1000px;
}

Answer 1

添加px - 它现在没有任何衡量单位 - 或100%到您的width和height属性（取决于您的需求）

我在您的代码中添加了background-size:cover并使用了另一张图片，因为您没有提供SVG：

.container {
background: url("http://lorempixel.com/200/200/") no-repeat;
background-size:cover;
background-position: center top;
height: 2000px;
width: 2000px;
}

Here's the fiddle

Answer 2

你可以尝试

background-size: 100% 100%; or
background-size: contain; or
background-size: cover;

取决于你想要达到的目标。

此外，如果您的容器内有浮子，则需要清除它们。容器内部没有浮动元素的任何高度。除非你指定一个固定的高度。

CSS - 背景图像无法正常显示

2 个答案: