零基础CSS入门教程(9)——背景颜色和背景图片

news2024/10/6 8:27:26

本章目录

- 1.任务目标
- 2.背景颜色
- 3.背景图片
- 4.小结

1.任务目标

我们前几小节学习了如何设置字体格式，我们这一小节学习一下如何设置背景颜色和图片

2.背景颜色

我们可以通过background-color给标签设置背景颜色，例如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .stem {
    background-color: aquamarine;
   
     
    }
    
  </style>
</head>

<body>
  <div class="stem">
    <p id="test">无边落木萧萧下</p>
    <p>不尽长江滚滚来</p>
    <div>君不见黄河之水天上来</div>、
    <br>
    <span>奔流到海不复回</span>
  </div>
  
</html>

效果如下
在这里插入图片描述

3.背景图片

如果觉得背景色不够好看，还可以找一张图片作为背景图，就想我们电脑或者手机的壁纸一般。
我们在images文件夹下放置一张图片，然后通过background-image来设置背景图。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
    background-image: url(./1.png.webp);
   
    }
    
  </style>
</head>

<body>
 
  
</html>