CSS背景属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS背景属性</title>
<style>
.c1{
/* 设置背景颜色 */
background-color: antiquewhite;
/* 设置背景图片 */
background-image: url(../悟空.jpg);
/* 设置背景重复方式 */
background-repeat: no-repeat;
/* 设置图片位置 */
background-position: 300px 100px;
height: 500px;
width: 500px;
font-size: 40px;
color: gold;
}
.c2{
background: chartreuse url(../imags/1.png) no-repeat 300px;
}
</style>
</head>
<body>
<div>
<p class="c1">
街角的咖啡店飘出阵阵香气,行人匆匆而过,偶尔有人驻足,点一杯热饮,享受片刻的宁静。生活有时就是这样,在忙碌中寻找一点小小的惬意。
</p>
<br>
<p class="c2">老旧的唱片机缓缓转动,悠扬的音乐流淌出来</p>
</div>
</body>
</html>
background
-
position讲解
background-position: left ; ;如果只写一个值,另一个方向的值取 center
background-position: right
background-position: 100px 500px ;
background-position: 100px ;