css背景相关样式

最新推荐文章于 2026-04-22 19:39:37 发布

原创最新推荐文章于 2026-04-22 19:39:37 发布 · 409 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

       #div{
            height: 300px;

            /*背景颜色*/
            background-color: red;

            /*背景图片（优先级高于背景颜色）*/
            background-image: url("../../../img/f3_Android.png");

            /*
            背景图片的遍历方式
            no-repeat:不重复
            repeat-x:X轴遍历
            repeat-y:Y轴遍历
            */
            background-repeat:no-repeat;

            /*
            background-size:背景图片的大小
            contain：
                   图片的宽高比例不变，直到较小的方向填满，
                   才停止缩放，图片永远不可能溢出
            cover:
                   图片的宽高比例不变，直到较大的方向填满，
                   才停止缩放，图片基本上都会溢出
            固定的大小：X轴的宽带   Y轴的高度
            百分比的大小（用的较多）：X轴的宽度百分比   Y轴的高度百分比
            */
            background-size:auto;
        }
background: url("../../../img/f3_Android.png") no-repeat;
/*定位背景图片
background-position:
            左上角：0% 0%
            中间： 50% 50%
            右下角：100% 100%
*/
background-position: 50% 50%;