CSS入门——背景样式

深碍√TFBOYSˉ_ 2022-11-15 11:37 147阅读 0赞

### 背景样式 ###

*  1.背景颜色
 *   *  任务描述
     *  相关知识
     *   *  代码文件
 *  2.背景图片
 *   *  任务描述
     *  相关知识
     *   *  代码文件
 *  3.背景定位与背景关联
 *   *  任务描述
     *  相关知识
     *   *  代码文件

# 1.背景颜色 #

## 任务描述 ##

本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景属性。

本关任务完成之后的效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]  
完成如下要求：

*  设置`body`的背景颜色(background)为象牙色(ivory)；
 *  设置段落`p`的背景颜色(background)为浅蓝色(lightblue)。

## 相关知识 ##

**背景色**

我们可以使用`background-color`为元素设置背景色，通常属性值为颜色名称或颜色编码。

*  因为HTML文档中body元素包含了HTML文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置body元素的background-color属性。

例如：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Hello World</title>
      <style type="text/css"> body { background-color: lightyellow; } h1 { color: gray; background-color: palegreen; } p { background-color: lightgray; } </style>
    </head>
    <body>
      <div>
        <h1>CSS让网页样式更丰富</h1>
        <p>这是一个段落</p>
      </div>
    </body>
    </html>

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]

### 代码文件 ###

**step1/sample.html:**

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Hello World</title>
      <style type="text/css"> body { background-color: lightyellow; } h1 { color: gray; background-color: palegreen; } p { background-color: lightgray; } </style>
    </head>
    
    <body>
      <div>
        <h1>CSS让网页样式更丰富</h1>
        <p>这是一个段落。</p>
      </div>
    </body>
    
    </html>

**step1/index.html:**

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
        <link rel="stylesheet" href="step1/CSS/style.css">
    </head>
    
    <body>
        <h1>CSS让网页样式更丰富</h1>
        <p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
    </body>
    
    </html>

**step1/CSS/style.css:**

/* ********** BEGIN ********** */
        body{
            background-color: ivory;
        }  
    
    
    /* ********** END ********** */
    
    h1 {
        font-size: 40px;
        text-align: center;
    }
    
    p {
        font-size: 18px;
        color: grey;
        /* ********** BEGIN ********** */
        background-color: lightblue;
    
        /* ********** END ********** */
    }

# 2.背景图片 #

## 任务描述 ##

本关任务：在本关中，我们将学习如何使用CSS去更改网页的背景图片。

本关任务完成之后的效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]  
完成如下要求：

*  设置背景图片，图标url地址为`https://www.educoder.net/attachments/download/211106`。

## 相关知识 ##

**背景图片**

*  设置背景图片
 *  我们可以使用background-image属性设置元素的背景属性，常见的网页背景图就是这样设置的。其中，属性值通过url指定图片链接。

书写格式：

background-image: url("图片链接")

例如：

<head>
            <meta charset="utf-8">
            <title>Hello World</title>
            <style type="text/css"> body { /*设置背景图片*/ background-image: url("./Assert/memphis-colorful.png") } div { width:90%; height: 100%; margin: auto; background-color: #FCFDF8; } </style>
        </head>

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]  
本例设置了body背景图像。

*  平铺背景图像
 *  指定了背景图像之后，默认背景图是平铺重复显示。如果想要设置图像在水平方向、垂直方向平铺或其他方式，可以设置`background-repeat`属性。

具体属性值设置如下：

<table> 
 <thead> 
  <tr> 
   <th>样式</th> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>水平平铺重复</td> 
   <td>repeat-x</td> 
  </tr> 
  <tr> 
   <td>垂直平铺重复</td> 
   <td>repeat-y</td> 
  </tr> 
  <tr> 
   <td>不重复平铺</td> 
   <td>no-repeat</td> 
  </tr> 
 </tbody> 
</table>

例如：

**1.默认平铺**

body {
         /*设置背景图片*/
         background-image:url("./Assert/sun.jpg");
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]  
**2.repeat-x**

body {
         /*设置背景图片*/
         background-image:url("./Assert/sun.jpg");
         background-repeat: repeat-x;
     }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]

**3.repeat-y**

body {
            /*设置背景图片*/
            background-image:url("./Assert/sun.jpg");
            background-repeat: repeat-y;
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]  
**4.no-repeat**

body {
            /*设置背景图片*/
            background-image:url("./Assert/sun.jpg"); 
            background-repeat: no-repeat;
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]

### 代码文件 ###

**step2/index.html:**

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
        <link rel="stylesheet" href="step2/CSS/style.css">
    </head>
    
    <body>
        <div>
          <h1>CSS让网页样式更丰富</h1>
          <p>这是一个段落</p>
        </div>
    </body>
    
    </html>

**step2/CSS/style.css:**

body {
        /* ********** BEGIN ********** */
        /*设置背景图片*/
        background-image: url("https://www.educoder.net/attachments/download/211106")
    
    
        /* ********** END ********** */
    }
    
    div {
        width: 90%;
        height: 100%;
        margin: auto;
    }

# 3.背景定位与背景关联 #

## 任务描述 ##

本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景定位和背景关联属性。

本关任务完成之后的效果图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 8]  
以**简写背景**的方式，设置背景图片，满足如下要求：

*  图片地址: `https://www.educoder.net/attachments/download/211104`；
 *  图片模式:no-repeat；
 *  背景图片定位: right top；
 *  设置背景关联: fixed。

## 相关知识 ##

*  背景定位
 *  当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用`background-position`属性改变图像在背景中的位置:

举例如下：

body {
        /*设置背景图片*/
        background-image: url("https://www.educoder.net/attachments/download/211104");
        background-repeat: no-repeat;
        background-position: right top;
    }

显示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 9]  
本例中，设置`right top`代表放置在元素内边距区的右上角。

对于具体位置，大家可以使用如下关键字的组合：

<table> 
 <thead> 
  <tr> 
   <th>属性值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>top left</td> 
  </tr> 
  <tr> 
   <td>top center</td> 
  </tr> 
  <tr> 
   <td>top right</td> 
  </tr> 
  <tr> 
   <td>center left</td> 
  </tr> 
  <tr> 
   <td>center center</td> 
  </tr> 
  <tr> 
   <td>center right</td> 
  </tr> 
  <tr> 
   <td>bottom left</td> 
  </tr> 
  <tr> 
   <td>bottom center</td> 
  </tr> 
  <tr> 
   <td>bottom right</td> 
  </tr> 
 </tbody> 
</table>

如果值定义了一个关键词，那么第二个值将是”center“。当然也可以使用百分比和长度值，现在只作为了解。

*  背景关联
 *  当页面较长时，滚动页面，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。如果想要背景图像不随页面滚动而改变位置。可以使用`background-attachment`属性，将其值设置为`fixed`。

body {
        background-image: url("https://www.educoder.net/attachments/download/211104");
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

*  简写背景
 *  从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。

例如：

body {
        background:#ffffff url("./Assert/sun.jpg") no-repeat right top;
    }

使用简写属性时，属性值的顺序为：

1.  background-color；
2.  background-image；
3.  background-repeat；
4.  background-attachment；
5.  background-position。

以上属性无需全部使用，大家可以按照页面设置使用。

### 代码文件 ###

**step3/index.html:**

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
        <link rel="stylesheet" href="step3/CSS/style.css">
    </head>
    
    <body>
        <div>
            <h1>CSS让网页样式更丰富</h1>
            <p>这是一个段落</p>
        </div>
    </body>
    
    </html>

**step3/CSS/style.css:**

body {
         margin-right: 200px;
         /* ********** BEGIN ********** */
         /*设置背景图片*/
        background:url("https://www.educoder.net/attachments/download/211104") no-repeat fixed  right top;
        
         /* ********** END ********** */
     }
    
     div {
         width: 90%;
         height: 100%;
         margin: auto;
     }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20221022/02a1a7b11dc548acbefcbf983220f6b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20221022/be10c97d54e84787906f297d6f528c87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210331174952109.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021033117511829.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210331175456500.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2021033117560760.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210331175643307.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210331175728767.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210331180018499.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210331180246675.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4,size_16,color_FFFFFF,t_70