使图像覆盖宽度（居中）答案

【问题标题】：Make image cover up the width (centered)使图像覆盖宽度（居中）
【发布时间】：2016-12-03 17:49:07
【问题描述】：

我想在一个新网站的首页上放一张图片，覆盖总宽度，并根据您的分辨率改变大小，但仍保持水平居中。

这是我目前正在处理的网站：http://jonathan.ohrstrom.nu，我希望整个红色部分都被这张图片覆盖：http://jonathan.ohrstrom.nu/style/img/featured.jpg

我该怎么做？这是我想要图像的 div 的 css 代码：

.featured {
    background-color: red;
    width: 100%;
    height: 700px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

我试过这个没有成功：

.featured {
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg) no-repeat;
    width: 100%;
    height: 700px;
    size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

但这根本没有加载图像。如果没有no-repeat，则图像覆盖了整个宽度，但它会重复自身..

【问题讨论】：

标签： html css image

【解决方案1】：

试试变成这样

.featured {
    background: url('http://jonathan.ohrstrom.nu/style/img/featured.jpg') no-repeat center center ;
    background-size: cover;
    z-index: 1;
    }

【讨论】：

做到了！谢谢

【解决方案2】：

使用background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);background-size: 100% 100%;

/* GRUNDER */
body {
	background-color: white;
	font-family: verdana;
}

/* MENY */
.menu_wrapper {
	width: 100%;
	height: 70px;
	background-color: rgba(45, 45, 45, .9);
	left: 0;
	top: 0;
	position: fixed;
	z-index: 99;
}
.menu_content {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	/*background-color: red;*/
	line-height: 70px;
	color: #a0a0a0;
	font-weight: 400;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
}
.menu_logo {
	float: left;
}
.menu_links {
	float: right;
}

a.menu {
	color: #a0a0a0;
	transition: .1s;
	text-decoration: none;
}
a.menu:hover {
	color: #e5a000;
}

ul.menuList {
	list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
	float: left;
	display: inline;
	margin: 0 10px;
}

/* CONTAINER */
.container {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.featured {
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
    background-size: 100% 100%;
    width: 100%;
    height: 700px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

<html><head>
<title>Webutveckling!</title>
<!-- META TAGS -->
<meta name="description" content="En webbyrå som skapar responsiva och smarta websidor åt större och mindre företag!">
<meta name="keywords" content="webutveckling,webbyr�,svensk,stockholm,billig">

<!-- CSS LINKS
<link rel="stylesheet" href="http://jonathan.ohrstrom.nu/style/style.css"> -->
<link rel="stylesheet" href="http://jonathan.ohrstrom.nu/style/font-awesome/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,500i" rel="stylesheet"></head>
<body>
	<a name="top"></a>
	
	<!-- MENY -->
	<div class="menu_wrapper">
	
		<div class="menu_content">
			
			<div class="menu_logo">
				*LOGO HÄR*
			</div>
			
			<div class="menu_links">
				<ul class="menuList">
					<li><a href="#top" class="menu">hem</a></li>
					<li><a href="#about" class="menu">info</a></li>
					<li><a href="#projekt" class="menu">projekt</a></li>
					<li><a href="#kontakt" class="menu">Kontakt</a></li>
				</ul>
			</div>
			
		</div>
	
	</div>
	
	<!-- WELCOME-BILD -->
	<div class="featured"></div>
	
	<div class="container">
	</div>
	
	<a name="about"></a>
	
	
	<!-- jQuery -->
    <script src="http://jonathan.ohrstrom.nu/js/jquery.js"></script>
	
	<script>
		$('a').click(function(){
			$('html, body').animate({
				scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
			}, 500);
			return false;
		});
	</script>

</body></html>

【讨论】：

【解决方案3】：

以下是我的建议：

.featured {
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 700px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

您可以使用 CSS 背景属性做很多事情：

使用 RGB 的十六进制设置颜色。
使用 url() 或单一属性 background-image 设置图像。
使用百分比或顶部/中心/底部属性将图像水平和垂直居中。您也可以使用属性 background-position 进行设置。
您还可以使用repeat/no-repeat 属性设置图像的重复。它还有自己的属性：background-repeat。
使用值或属性 background-size 设置图像的大小。您还可以使用此属性来缩放容器中的图像，就像使用属性封面或包含一样。
您可以做更多事情，请参阅link 了解有关背景的更多信息。

【讨论】：