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

2020-12-25 13:03:05 阅读：179 来源： 互联网

标签：body 设置 repeat 入门样式 color 背景图片 background CSS

第1关：背景颜色
任务描述
本关任务：在本关中，我们将学习如何使用CSS去更改HTML元素的背景属性。
本关任务完成之后的效果图如下：
在这里插入图片描述
背景色
我们可以使用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>

显示效果如图：
在这里插入图片描述
编程要求
学会了基本设置背景颜色的方式，现在让我们来实践一下吧。请在右侧的编辑框中修改style.css文件，完成如下要求：
设置body的背景颜色(background)为象牙色(ivory)；
设置段落p的背景颜色(background)为浅蓝色(lightblue)。
测试说明
平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；
开始你的任务吧，祝你成功！
参考代码：
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/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/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去更改网页的背景图片。
本关任务完成之后的效果图如下：
在这里插入图片描述
相关知识
背景图片
设置背景图片
我们可以使用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属性。
具体属性值设置如下：
在这里插入图片描述
例如：
默认平铺
body {
/设置背景图片/
background-image:url("./Assert/sun.jpg");
}

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

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；
修改背景图片模式，显示为默认平铺样式。
测试说明
平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；
开始你的任务吧，祝你成功！

参考代码：
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元素的背景定位和背景关联属性。
本关任务完成之后的效果图如下：
在这里插入图片描述
相关知识
为了完成本关任务，请大家认真阅读以下内容。
背景定位
当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用background-position属性改变图像在背景中的位置:
举例如下：

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

显示效果如图：

在这里插入图片描述
本例中，设置right top代表放置在元素内边距区的右上角。
对于具体位置，大家可以使用如下关键字的组合：

如果值定义了一个关键词，那么第二个值将是”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。
测试说明
平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；
开始你的任务吧，祝你成功！
参考代码：
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;
 }

标签：body,设置,repeat,入门,样式,color,背景图片,background,CSS
来源： https://blog.csdn.net/m0_47174730/article/details/111671430

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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