CSS入门——背景样式

1.背景颜色

任务描述

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

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

  • 设置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>

显示效果如图:
在这里插入图片描述

代码文件

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去更改网页的背景图片。

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

  • 设置背景图片,图标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>

显示效果如图:
在这里插入图片描述
本例设置了body背景图像。

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

具体属性值设置如下:

样式属性值
水平平铺重复repeat-x
垂直平铺重复repeat-y
不重复平铺no-repeat

例如:

1.默认平铺

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

在这里插入图片描述
2.repeat-x

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

在这里插入图片描述

3.repeat-y

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

在这里插入图片描述
4.no-repeat

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

在这里插入图片描述

代码文件

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元素的背景定位和背景关联属性。

本关任务完成之后的效果图如下:
在这里插入图片描述
简写背景的方式,设置背景图片,满足如下要求:

  • 图片地址: 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;
}

显示效果如图:
在这里插入图片描述
本例中,设置right top代表放置在元素内边距区的右上角。

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

属性值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果值定义了一个关键词,那么第二个值将是”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;
 }
  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

少年游四方

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值