我正在尝试掌握 CSS。想要将页眉的背景图像拉伸(stretch)以填充页面的宽度。
已经尝试过 background-size: cover; 但似乎没有效果。
我做错了什么？
代码笔:http://codepen.io/jacobdw/pen/mOjozZ
HTML:
<DOCTYPE! HTML>
<html>
<head>
<title>Development Resources</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
</head>
<body>
<header>
<h1>Development Resources</h1>
</header>
<section class="container">
<article>
<h2>News/Blogs</h2>
<h3>Web Design</h3>
<ul>
<li><a href="http://www.webdesignerdepot.com/">Web Designer Depot</a></li>
<li><a href="http://www.instantshift.com/">Instant Shift</a></li>
<li><a href="http://www.hongkiat.com/blog/">Hong Kiat</a></li>
<li><a href="https://www.smashingmagazine.com/" title="e.g. 'Information about the company ...">Smashing Magazine</a></li>
<li><a href="http://www.vandelaydesign.com">Vandelay Design</a></li>
<li><a href="http://thenextweb.com/">The Next Web</a></li>
<li><a href="https://speckyboy.com/">Speckyboy</a></li>
</ul>
</article>
<article>
<h2>Courses</h2>
<ul>
<li><a href="https://www.lynda.com/">Lynda</a></li>
<li><a href="https://dash.generalassemb.ly/">Dash | General Assembly</a></li>
<li><a href="https://www.freecodecamp.com">FreeCodeCamp</a></li>
<li><a href="https://www.codecademy.com/">Code Academy</a></li>
</ul>
</article>
<article>
<h2>References</h2>
<h3>General</h3>
<ul>
<li><a href="https://developer.mozilla.org/">MDN</a></li>
<li><a href="http://www.w3schools.com/">w3schools</a></li>
<li><a href="http://jgthms.com/web-design-in-4-minutes/">Web Design in 4 Minutes</a></li>
</ul>
<h3>HTML</h3>
<ul>
<li><a href="https://css-tricks.com/examples/CleanCode/Beautiful-HTML.png">What Beautiful HTML Looks Like</a></li>
</ul>
<h3>CSS</h3>
<ul>
<li><a href="http://www.w3schools.com/css/default.asp">W3 Schools CSS</a></li>
<li><a href="https://css-tricks.com/">CSS-Tricks</li>
<li><a href="http://www.dustindiaz.com/css-shorthand/">CSS Shorthand</a></li>
<li><a href="http://css.maxdesign.com.au/listamatic/">Listamatic</a></li>
<li><a href="http://www.noupe.com/essentials/freebies-tools-templates/css-typography-contrast-techniques-tutorials-and-best-practices.html">CSS Typography Contrast Techniques</a></li>
<li><a href="http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php">CSS Navigation Techniques Showcase</a></li>
<li><a href="http://odyniec.net/articles/turning-lists-into-trees/">Turning Lists into Trees</a></li>
<li><a href="http://alistapart.com/article/multicolumnlists">Multi-column Lists</a></li>
<li><a href="https://3.7designs.co/blog/2008/06/10-examples-of-beautiful-css-typography-and-how-they-did-it/">10 Examples of Beautiful CSS Typography</a></li>
<li><a href="https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/">CSS Specificity Things You Should Know</a></li>
</ul>
</article>
<article>
<h2>Tips</h2>
<h3>CSS</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS">Writing Efficient CSS</a></li>
<li><a href="http://www.webdesignerdepot.com/2009/05/10-best-css-practices-to-improve-your-code/">10 Best CSS Practices to Improve Your Code</a></li>
<li><a href="https://code.tutsplus.com/tutorials/5-ways-to-instantly-write-better-css--net-3003">5 Ways to Instantly Write Better CSS</a></li>
<li><a href="http://erraticwisdom.com/2006/01/18/5-tips-for-organizing-your-css">5 Tips for Organising Your CSS</a></li>
<li><a href="https://www.smashingmagazine.com/2008/05/improving-code-readability-with-css-styleguides/">Improving Code Readability with CSS Style Guides</a></li>
<li><a href="http://webdesignerwall.com/tutorials/typographic-contrast-flow">Typography Contrast</a></li>
<li><a href="http://designreviver.com/tips/13-training-principles-of-css-everyone-should-know/">13 Training Principles of CSS Everyone Should Know</a></li>
</ul>
</article>
<article>
<h2>Tools</h2>
<h3>CSS</h3>
<ul>
<li><a href="http://www.cssmatic.com/">CSSMatic</a></li>
<li><a href="http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/">List-o-matic</a></li>
</ul>
</article>
<article>
<h2>Other</h2>
<h3>Code Editors</h3>
<ul>
<li><a href="https://github.com/">Github</a></li>
<li><a href="https://codepen.io/">Codepen</a></li>
<li><a href="https://jsfiddle.net/">JSFiddle</a></li>
</ul>
<h3>Communities</h3>
<ul>
<li><a href="http://stackoverflow.com/">Stackoverflow</a></li>
</ul>
</article>
</section>
</body>
</html>
CSS:
header {
background-color: #263d36;
background-image: url("https://static.pexels.com/photos/90807/pexels-photo-90807.jpeg");
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
line-height: 1.2;
padding: 10vw 2em;
text-align: center;
margin-bottom: 50px;
}
header h1 {
color: white;
background: black;
padding: 50px 10px;
}
body {
color: #555;
font-family: 'Space Mono', monospace;
line-height: 1.5em;
margin: 0 auto;
width: 920px;
padding: 30px 20px;
}
h1, h2, strong {
color: #333;
}
a {
color: firebrick
}
ul {
border-left: 1px solid #555;
list-style-type: none;
margin-left: -20px;
}
最佳答案
从你的 body 中移除宽度或将其设置为自动，如下所示:
body {
color: #555;
font-family: 'Space Mono', monospace;
line-height: 1.5em;
margin: 0 auto;
width: auto;
padding: 30px 20px;
}
如果您希望内容的位置与之前相同，请尝试添加:
.container {
width: 920px;
margin: 0 auto;
}
关于html - CSS Header Stretch——我做错了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41083001/