红楼梦 - 为HTML添加背景图片 - 常规

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>红楼梦</title>
  <style>
    body {
      background-image: url('path/to/background.jpg');
      background-size: cover;
      background-position: center;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
<pre><code>.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #bd0000;
  font-size: 36px;
  margin-bottom: 40px;
}

h2 {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

p {
  color: #555;
  line-height: 1.6;
  margin-bottom: 10px;
}

.quote {
  color: #777;
  font-style: italic;
  margin-bottom: 20px;
}

.chapter {
  margin-bottom: 60px;
  border-bottom: 1px solid #ebebeb;
  padding-bottom: 20px;
}

.chapter:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
</code></pre>
  </style>
</head>
<body>
  <div class='container'>
    <h1>红楼梦</h1>
<pre><code>&lt;div class='chapter'&gt;
  &lt;h2&gt;第一回 大观园的故事&lt;/h2&gt;
  &lt;p&gt;梦觉那管人闲事，好梦留人不醒来。&lt;/p&gt;
  &lt;p&gt;梦里梦到一个奇怪的地方，那是一座美丽的花园，叫做大观园。花园里有许多奇异的花草，还有美丽的湖泊和精致的建筑。主人贾源把这座花园取名为'红楼梦'，寓意着红尘中的梦幻世界。&lt;/p&gt;
  &lt;p&gt;大观园里住着许多人，其中有贾宝玉、贾母、林黛玉和薛宝钗等人。他们之间发生了许多爱情和争斗的故事。&lt;/p&gt;
  &lt;blockquote class='quote'&gt;'人生自是有情痴，此恨不关风与月。'&lt;/blockquote&gt;
&lt;/div&gt;

&lt;div class='chapter'&gt;
  &lt;h2&gt;第二回 宴黄府的故事&lt;/h2&gt;
  &lt;p&gt;风风雨雨，一个又一个的故事。&lt;/p&gt;
  &lt;p&gt;贾宝玉和林黛玉相爱，但是命运却让他们分开了。贾宝玉被送到贾府，与贾政的家人一起生活。他们在贾府举办了一场盛大的宴会，邀请了许多贵族和朋友。&lt;/p&gt;
  &lt;p&gt;宴会上，贾宝玉和林黛玉重逢，他们的心再次燃起了爱的火焰。&lt;/p&gt;
  &lt;blockquote class='quote'&gt;'宴罢酒醒人已稀，月明直到曙中回。'&lt;/blockquote&gt;
&lt;/div&gt;

&lt;div class='chapter'&gt;
  &lt;h2&gt;第三回 荣府之变&lt;/h2&gt;
  &lt;p&gt;家庭纷争，悲欢离合。&lt;/p&gt;
  &lt;p&gt;贾宝玉的家族发生了剧变。荣府的主人荣康因私通宝玉的婶婶被发现，导致家族中出现了裂痕。家族成员们为了争夺权力展开了激烈的争斗。&lt;/p&gt;
  &lt;p&gt;在这场争斗中，贾宝玉的心也受到了严重的伤害。&lt;/p&gt;
  &lt;blockquote class='quote'&gt;'天下孤城万里长，地居寸草百花香。'&lt;/blockquote&gt;
&lt;/div&gt;

&lt;!--更多章节内容--&gt;
</code></pre>
  </div>
</body>
</html>
<p>要将图片作为背景，您可以使用CSS的<code>background-image</code>属性来实现。请将以下代码添加到您提供的HTML的<code>&lt;style&gt;</code>标签中：</p>
<pre><code class="language-css">body {
  background-image: url('path/to/background.jpg');
  background-size: cover;
  background-position: center;
}
</code></pre>
<p>请将<code>'path/to/background.jpg'</code>替换为您要使用的背景图片的文件路径。此代码将将指定的背景图片应用于<code>body</code>元素，并设置图片大小为覆盖整个背景，居中显示。</p>
<p>完整的HTML代码如下所示：</p>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang='zh-CN'&gt;
&lt;head&gt;
  &lt;meta charset='UTF-8'&gt;
  &lt;meta name='viewport' content='width=device-width, initial-scale=1.0'&gt;
  &lt;title&gt;红楼梦&lt;/title&gt;
  &lt;style&gt;
    body {
      background-image: url('path/to/background.jpg');
      background-size: cover;
      background-position: center;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    .container {
      max-width: 900px;
      margin: 0 auto;
      padding: 20px;
    }
    
    h1 {
      text-align: center;
      color: #bd0000;
      font-size: 36px;
      margin-bottom: 40px;
    }
    
    h2 {
      color: #333;
      font-size: 24px;
      margin-bottom: 20px;
    }
    
    p {
      color: #555;
      line-height: 1.6;
      margin-bottom: 10px;
    }
    
    .quote {
      color: #777;
      font-style: italic;
      margin-bottom: 20px;
    }
    
    .chapter {
      margin-bottom: 60px;
      border-bottom: 1px solid #ebebeb;
      padding-bottom: 20px;
    }
    
    .chapter:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class='container'&gt;
    &lt;h1&gt;红楼梦&lt;/h1&gt;
     

    &lt;div class='chapter'&gt;
      &lt;h2&gt;第一回 大观园的故事&lt;/h2&gt;
      &lt;p&gt;梦觉那管人闲事，好梦留人不醒来。&lt;/p&gt;
      &lt;p&gt;梦里梦到一个奇怪的地方，那是一座美丽的花园，叫做大观园。花园里有许多奇异的花草，还有美丽的湖泊和精致的建筑。主人贾源把这座花园取名为'红楼梦'，寓意着红尘中的梦幻世界。&lt;/p&gt;
      &lt;p&gt;大观园里住着许多人，其中有贾宝玉、贾母、林黛玉和薛宝钗等人。他们之间发生了许多爱情和争斗的故事。&lt;/p&gt;
      &lt;blockquote class='quote'&gt;'人生自是有情痴，此恨不关风与月。'&lt;/blockquote&gt;
    &lt;/div&gt;

    &lt;div class='chapter'&gt;
      &lt;h2&gt;第二回 宴黄府的故事&lt;/h2&gt;
      &lt;p&gt;风风雨雨，一个又一个的故事。&lt;/p&gt;
      &lt;p&gt;贾宝玉和林黛玉相爱，但是命运却让他们分开了。贾宝玉被送到贾府，与贾政的家人一起生活。他们在贾府举办了一场盛大的宴会，邀请了许多贵族和朋友。&lt;/p&gt;
      &lt;p&gt;宴会上，贾宝玉和林黛玉重逢，他们的心再次燃起了爱的火焰。&lt;/p&gt;
      &lt;blockquote class='quote'&gt;'宴罢酒醒人已稀，月明直到曙中回。'&lt;/blockquote&gt;
    &lt;/div&gt;

    &lt;div class='chapter'&gt;
      &lt;h2&gt;第三回 荣府之变&lt;/h2&gt;
      &lt;p&gt;家庭纷争，悲欢离合。&lt;/p&gt;
      &lt;p&gt;贾宝玉的家族发生了剧变。荣府的主人荣康因私通宝玉的婶婶被发现，导致家族中出现了裂痕。家族成员们为了争夺权力展开了激烈的争斗。&lt;/p&gt;
      &lt;p&gt;在这场争斗中，贾宝玉的心也受到了严重的伤害。&lt;/p&gt;
      &lt;blockquote class='quote'&gt;'天下孤城万里长，地居寸草百花香。'&lt;/blockquote&gt;
    &lt;/div&gt;
    
    &lt;!--更多章节内容--&gt;

  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>