educoder トレーニング プラットフォーム ----CSS3 背景スタイル
レベル 1: CSS の背景に関連する概念
お父さん
レベル 2: CSS の背景色の設定
<!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 背景画像設定**
<!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>