<body>
<h1>背景色のサンプル</h1>
<div class="first"></div>
<div class="second"></div>
</body>
body {
background-color: #e0ffff;
}
body > div {
/*背景色を見せるために、幅と高さを指定*/
width: 150px;
height: 50px;
}
.first {
/*firstというクラスの要素の背景を青色にする*/
background-color: blue;
}
.second {
/*secondというクラスの要素の背景を赤色にする*/
background-color: rgba(255, 0, 0, 0.3);
/*要素を重ねる*/
position: relative;
top: -25px;
left: 50px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.