CSS3背景样式

最新推荐文章于 2023-06-20 20:49:20 发布

静待花开︳

最新推荐文章于 2023-06-20 20:49:20 发布

阅读量343

点赞数

分类专栏： educoder Web前端文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_52184490/article/details/122048923

版权

educoder 同时被 2 个专栏收录

51 篇文章 10 订阅

订阅专栏

Web前端

35 篇文章 2 订阅

订阅专栏

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

1、下列选项中，可用于设置背景颜色的属性是（） D.background-color

2、将背景的绘制区设置到内容区，应使用background-clip属性中的（）值。 A.content-box

3、在CSS3背景图属性中，可以设置背景图的平铺是（）。 C.background-repeat

4、在CSS3新增的background-size属性中，（）是参考父元素宽高来设置图像宽度和高度的。

A.50% 50%

5、CSS样式background-position:-5px 10px代表的意义是（）。

D.背景图片向左偏移5px,向下偏移10px

第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://www.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>