Question

关于为什么我的外部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;}

Answer 1

将背景图像放在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背景图像涵盖标题和文本

1 个答案: