当前位置：首页 > news >正文

CSS背景属性

news 来源：原创 2025/6/9 11:33:08

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