EduCoder-Web程序设计基础-html5— CSS样式规则- 第3关：用内嵌式引入CSS样式_本关任务：采用内嵌式方法为网页元素添加样式。-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51402180/article/details/121799689

本任务指导如何在HTML中通过内嵌样式为body元素设置背景图。需了解在HTML头部添加CSS样式，并使用background-image, background-size属性。示例中展示了如何设置背景图及保持纵横比覆盖背景区域的最小大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

任务描述

本关任务：采用内嵌式方法为网页元素添加样式。
效果如下：
内嵌式效果

编程要求

请在右侧编辑器中的Begin - End区域内补充代码，为body标签添加样式规则，具体要求是：
1.为网页设置背景图，图像的url地址为https://www.educoder.net/api/attachments/1427381
2.设置背景图像的大小，使其保持纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
3.上述样式设置顺序：
（1）设置背景图
（2）设置背景图的大小

测试说明

补充代码后，请点击测评，平台会对你编写的代码进行测试，如果正确则完成闯关任务。
注意：因测评需要，每条样式规则可以分行写出，但行尾分号不要缺省

越努力越幸运，祝你成功！

代码示例

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>内嵌CSS样式</title>
  <style type="text/css">
    /* ********** BEGIN ********** */   
    body {
      background-image:url(https://www.educoder.net/api/attachments/1427381);
      background-size:cover;
    }
    /* ********** END ********** */   
    div {
        position:fixed;
           left:400px;
            top:100px;
           color:#ffffff;
       font-family:黑体;
        text-align:center;
    }   
  </style>
 </head>
 <body>
  <div>
   <h1>静夜思</h1>
   <h2>床前明月光</h2>
   <h2>疑是地上霜</h2>
   <h2>举头望明月</h2>
   <h2>低头思故乡</h2>
  </div>
 </body>
</html>