Web(六)CSS3语法-背景样式_css3设置微软雅黑-CSDN博客

第1关：CSS背景相关的概念

第2关：CSS-背景色的设置

编程要求

请在右侧编辑器的Begin - End区域内补全样式代码，使得网页背景色为#add。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS-背景色的设置</title>
    <style type="text/css">
        h2{font:微软雅黑;
               text-align:center;
             }	
        #p1{font-size:13px;
                color:#979797;
                text-align:center;
             }
        hr{border:1px solid #CCCCCC;} 
        #p2{text-indent:2em;}
        span{color:blue;}
        .background{
        /* ********* Begin ********* */	
        background-color:#add;
        
        /* ********* End ********* */
            }
    </style>
</head>
<body class="background">
    <div class="backgroundImage">
      <h2>新媒体的大势所趋</h2>
	  <p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p>
	  <hr size="2" color="#CCCCCC" />
	  <p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
    </div>
</body>
</html>

第3关：CSS-背景图的设置

编程要求

请在右侧编辑器的Begin - End区域内补全样式代码，用于设置div标签中的背景图，具体要求如下：

（1）背景图的路径为https://data.educoder.net/api/attachments/2478800

（2）该背景图随内容滚动

（3）保持背景图的横纵比，将图像缩放成将完全覆盖背景定位区域的最小大小。

（4）背景图的定位设置：水平向左偏移-260px，垂直偏移0px。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS-背景色的设置</title>
    <style type="text/css">
        h2{font:微软雅黑;
           text-align:center;
          }	
        #p1{font-size:13px;
            color:#979797;
            text-align:center;
          }
        hr{border:1px solid #CCCCCC;} 
        #p2{text-indent:2em;}
        span{color:blue;}
        .background{background-color:#add;}
        .backgroundImage{
	        width:360px;
	        height:240px;
            overflow:scroll;
	        padding:30px;
	        border:3px solid #30F;
          /* ********* Begin ********* */
            background-image:url(https://www.educoder.net/api/attachments/2478800);
            background-attachment:scroll;
            background-size:cover;
            background-position:-260px 0px;    
          /* ********* End ********* */          
	     }
 
    </style>
</head>
<body class="background">
    <div class="backgroundImage">
      <h2>新媒体的大势所趋</h2>
	  <p id=p1>更新时间：2021年11月30日14时08分 来源：<span>开源社区</span></p>
	  <hr size="2" color="#CCCCCC" />
	  <p id=p2>近年来，随着<span>移动互联网</span>的火爆，公众号、微博、今日头条、抖音等一大批社交平台的火爆带动了新媒体运营行业的发展，运营人在企业中的价值也不断的被放大和受到重视，很多企业在做线上这块时都会考虑<span>“两微一抖”</span>，也就是我们所说的新媒体+短视频运营。因此也就催生了大量对新媒体+短视频运营人的需求岗位。</p>
    </div>
</body>
</html>