<!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 ;