背景

背景颜色  background-color

<style>
        .box1{
            width:200px;
            height:200px;
            /* background-color: yellow; */
            /* background-color: rgb(255, 0, 10); */
            background-color: rgba(255, green, blue, alpha);
            /* alpha可以设置颜色透明度 */
            /* 十六进制写法 background-color: #ff0000; */
        }
    </style>
</head>
<body>
   <div class="box1"></div>
</body>

背景图片及属性

  <style>
        .box1{background-color: aqua;
                width: 400px;
                height: 400px;
                background-image: url(../effect.gif);
　　　　　　　　　　background-repeat:no-repeat;
                /* repeat:默认平铺效果 
                 repeat-x:默认x轴平铺效果
                 repeat-y:默认y轴平铺效果
                 no-repeat:不平铺
                */
                background-position: 20px 20px;
                /* 1.20px 20px
                   2.10% 10%
                   3.left right center
                    top center bottom 两两进行组合 */
　　　　　　　　　　background-size:400px 400px;

　　　　　　　　* background-size可以改变图片的大小但是图片像素也会发生 */
</style>
</head>
<body>
   <div class="box1"></div>

背景属性补充：background-size:cover    使图片占满整个背景，图片可能会部分溢出背景

　　　　　　　　　　　　　　 contain   与图片为主，让照片最大程度地呈现在背景中，背景可能会留有空白

　　　　　　background-attachment:scroll  滚动

　　　　　　　　　　　　　　　　　fixed  固定（跳出盒子，固定在浏览器中，但是必须要在盒子容器中

posted @ 2023-10-09 18:10  故塔拉黑暗之神  阅读(3)  评论(0)  编辑  收藏  举报