css背景

背景可以是一个颜色块，也可以是一张图片

html代码

<html>
    <head>
        <title>
            我的第一个代码
        </title>
        <link rel="stylesheet" href="./public.css">
    </head>
    <body>
        <div class="box">
            <p class="t1">这是一个很普通的段落</p> <!--当然了背景中可插入文字-->
        </div>
    </body>
</html>

css颜色块背景代码

.box{
    width: 600px; /*这种背景一定要设置宽度高度，否则背景的宽度高度默认为0*0*/
    height: 400px;
    background-color: blue;
}

css图片作为背景代码

.box{
    width: 600px;
    height: 400px;
    background-image: url("./atta.png");
    background-size: cover; /*不加上这段代码图片会只显示一部分，cover意味着等比例缩放（未充满会留空白），contain代表图片完整显示（未充满可能会导致图片重叠平铺）*/
    background-position: center center;/*这行代码可规定图片渲染的位置left center right左中右 top center bottom上中下 更多的还有x%规定比例 pos规定位于像素点哪个位置*/
     background-repeat: no-repeat;/*这个属性规定是否需要重复平铺，以及重复平铺的方式*/
}
posted @ 2025-09-12 23:23  AttaSayyid  阅读(6)  评论(0)    收藏  举报