HTML5 backround-image 问题及其上方的浮动图像。也不能调整不透明度。

Question

我正在为我的孩子编写一个网站，这也是 class 的作业。我正在尝试将图像作为背景放在正文中，并在其上放置文字。图像终于出现了，但是它上面的浮动框是中间页面，不会浮动到页面的边缘。我包括了 .css 文件。图像文件与其他所有文件都在同一个文件中，并且文件有一个 link。

h1 {
    color: green;
    text-align: center;  
}

h2 {
    color: green;
    text-align: center;
}

#header {
height:100px;
background:black; 
text-align: center;
text color: green;
}

body {
    margin:0;
    padding:0;
    width:100%;
    height:1000px;
    margin:0;
    dislay:block;
    color: #000000;
    background-image:url('trees.jpeg') &nbsp;
    background-repeat: no-repeat;

}

#footer {
    height:50px;
    background:black;
    text color:green;
    text-align:left-side;
}

#content {
    height:1000px;
}

table {
        width:100%;
    Height:500px;
}

页面中的link是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="dio.css">
</head>

我的主页设置不同，所以我直接在页面中输入了图像的信息，因为它没有 linked。这是头。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #header {
            height:100px;
            background:green;
        }
    </style>

    <style>
        h1 {
            color:black;
            text-align: center;
        }
    </style>

    <style>
        h2 {
            color: green;
            text-align: center;
        }
    </style>

    <style>
        p {
            text color:blue;    
        }

    </style>

    <style>
        #sidebar {
            width:10%;
            height:1000px;
            float:left;
        }
    </style>

    <style>
        #content {
            float:left;
        }
    </style>

    <style>
        #advertising {
            width:10%;
            height:1000px;
            float:right;
        }
    </style>

    <style>
        #footer {
            height:50px;
            text-align:center;
            background:green;
            text color:black;
            clear: both;
        }
    </style>
    <style>
        body {
            margin:0;
            padding:0;
            width:100%;
            height:1000px;
            margin:0;
            dislay:block;
            color: #000000;
            background-image:url('trees.jpeg') &nbsp;
            background-repeat: no-repeat;
        }
    </style>
</head>

我做错了什么？我研究了这个问题，一直在尝试不同的方法但无济于事。

Answer 1

我在 background-image 属性的末尾看到一个  。尝试用分号替换它。

此外，对于您的主页，您可以将样式组合在一个 <style> 标签下。

Answer 2

我能够通过以下 HTML 和 CSS 解决背景问题：

HTML header

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="dio.css">
  <link href='https://fonts.googleapis.com/css?family=Exo:400,700italic' rel='stylesheet' type='text/css'>
  <script src="dio.js"></script>
  <script>
      window.alert("Welcome to our DIO site!")
  </script>
  <script>document.getElementById('someId').style.color = '#00FF00';</script>
  <style>
      body {
          height:1150px;
          width:1280px;
      }

      #advertising {
          background:olive;
          width:20%;
          height:1000px;
          float:right;
      }

      #sidebar {
          height:1000px;
      }

      #footer {
          height:50px;
          width:1280px;
          background:black;
          text-align:center;
          clear:both;
      }

      p {
          font-size: 22pt;
      }

      #content {
          text-align:center;
      }
  </style>
  </head>

和CSS

h1 {
    color:#ADFF2F;
    text-align: center;
    font-weight: bold;
}

h2 {
    color:#ADFF2F;
    text-align: lcenter;
    font-weight: bold;
}

p, strong, summary, section, h3, p2 {
    color:#ADFF2F;
    font-weight: bold;
}

a {
    font-weight:bold;
    text-decoration:none;
}

a, h1, h2, p, strong, summary, section, h3, p2 {
    font-family: 'Exo', sans-serif;
} 

a:link {
    color:#FF69B4;
}

a:active {
    color:#e03a3e;
}

a:hover {
    color:#e03a3e;
}

header {
    height:100px;
    width:1280px;
    background:black; 
    text-align: center;
    font-weight: bolder;
}

html {
    background:url('trees.jpg') #98FB98 no-repeat;
    background-size:cover;
}

body {
    background:rgba(0,0,0,0.4);
}

#content {
    float:left;
    box-sizing:border-box;
    display:inline-block;
    width:60%;
    height:1000px;
}

#sidebar {
    background:olive;
    width:20%;
    float:left;
}

table {
    width:1020px;
}

table, th, td {
    border: 1px solid black;
    padding:5px;
    border-collapse:collapse;
    color:#00FF00; 
    font-weight: bold;

}

thead {
    background: #3056A0;
    color: white;
    font-weight: bold;
}

table > caption {
    font-weight: bold;
}

tfoot {
    font-size: 0.75em;
    text-align:right;
    font-weight: bold;
}

tbody tr:nth-child(even) {
    background: #808000;
    font-weight: bold;
}

tbody tr {
    background: #808000
    font-weight: bold;
}

footer {
    height:50px;
    width:1280px;
    background:black;
    text-align:center;
    clear:both;
}

#salesDetails, #contactList {
    border: 1px solid #999999;
    margin: 15px;
    padding:15px;
}

label {
    width:150px;
    display: inline-block;
    vertical-align: top;
}

input {
    width:200px;
}

.formRow {
    margin-bottom:10px;
}

HTML5 backround-image 问题及其上方的浮动图像。也不能调整不透明度。

HTML5 Issue with backround-image and accompanied float image above it. Also cannot adjust opacity.

html

css

background-image

css-float