CSS从入门到精通——背景样式

最新推荐文章于 2024-04-03 19:51:53 发布

usrname为username

最新推荐文章于 2024-04-03 19:51:53 发布

阅读量1.3k

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_54327001/article/details/121896958

版权

任务描述

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

本关任务完成之后的效果图如下：

第2关：背景图片

任务描述

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

本关任务完成之后的效果图如下：

相关知识

背景图片

设置背景图片

我们可以使用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 {
2. /*设置背景图片*/
3. background-image:url("./Assert/sun.jpg");
4. }

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

repeat-y

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

no-repeat

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

任务要求

请在右侧的编辑框中修改style.css文件，完成如下要求：

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

body {
    /* ********** BEGIN ********** */
    /*设置背景图片*/

  background-image:url("https://www.educoder.net/attachments/download/211106"); 
    /* ********** END ********** */
}

div {
    width: 90%;
    height: 100%;
    margin: auto;
}

第3关：背景定位与背景关联

任务描述

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

本关任务完成之后的效果图如下：

相关知识

为了完成本关任务，请大家认真阅读以下内容。

背景定位

当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用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;
}

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

background-color；
background-image；
background-repeat；
background-attachment；
background-position。

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

编程要求

请在右侧的编辑框中修改style.css文件，以**简写背景**的方式，设置背景图片，满足如下要求：

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

 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;
 }

usrname为username

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS从入门到精通——背景样式

任务描述本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景属性。本关任务完成之后的效果图如下：相关知识为了完成本关任务，请大家认真阅读以下内容。背景色我们可以使用background-color为元素设置背景色，通常属性值为颜色名称或颜色编码。因为HTML文档中body元素包含了HTML文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置body元素的background-color属性。例如：<!DOCTYPE html&gt
复制链接

扫一扫