关于为什么我的外部 CSS 工作表不合作的任何想法？我需要我的页面内容位于背景图片下方。 这是我的 html 代码...我将把外部 CSS 片段放在下面:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="AlbumPage.css">
<link <link href="https://fonts.googleapis.com/css?family=IM+Fell+English" rel="stylesheet">
<title>Album Page </title>
</head>
<body>
<div class="Album Art">
</div>
<span style="margin-top: 500px">
<h1>Captain Fantastic and the Brown Dirt Cowboy</h1>
<center><a href="http://ultimateclassicrock.com/elton-john-captain-fantastic/" target"_blank">Elton John</a>
<p>May, 1975</center></p></center>
<table border="1" width="100%"></table>
<h2><bold><center>Band Members and Producers</center></bold></h2>
css:
body{background-image: url("Captain Fantastic Full Album Art.jpg");
background-repeat: no-repeat;
background-position: center top;
height: 200px
width:350px;}
h1 {font-family: 'IM Fell English', serif; text-align: center; }
h2 {font-family: 'IM Fell English', serif; text-align: center;}
最佳答案
将背景图像放在一个 div 中。如果它在正文中，它将覆盖整个页面。
<body>
<div class="album-art"></div>
<h1>Captain Fantastic and the Brown Dirt Cowboy</h1>
<center><a href="http://ultimateclassicrock.com/elton-john-captain-fantastic/" target"_blank">Elton John</a>
<p>May, 1975</center></p></center>
<table border="1" width="100%"></table>
<h2><bold><center>Band Members and Producers</center></bold></h2>
</body>
<!--Style-->
<style>
.album-art {
background-image: url("Captain Fantastic Full Album Art.jpg");
background-repeat: no-repeat;
background-position: center top;
height: 200px
width:350px;
}
h1 {
font-family: 'IM Fell English', serif;
text-align: center;
}
h2 {
font-family: 'IM Fell English', serif;
text-align: center;
}
</style>
关于css 背景图像覆盖标题和文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41473953/