background-size属性和background属性的书写顺序

小奋斗♛

于 2023-07-20 22:53:58 发布

阅读量262

点赞数

文章标签：前端 javascript 开发语言 css

本文链接：https://blog.youkuaiyun.com/m0_72684019/article/details/131841590

版权

在CSS样式中，将background-size属性放在前面或后面会导致图片显示效果不同。当background-size在前面时，图片显示不全；而放在后面时，图片能正确显示。这种差异与CSS的解析和应用顺序有关。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在B站上面学习可视化大屏，发现background-size和background的书写顺序不同，所得到的效果也不同，如下：

1、background-size在前面

 .map1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6.475rem;
        height: 6.475rem;
        background-size: 100% 100%;  // background-size在前面
        background: url(../images/map.png) no-repeat;
        opacity: 0.3;

效果如下：图片显示不全

2、background-size在后面

 .map1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6.475rem;
        height: 6.475rem;
        background: url(../images/map.png) no-repeat;
        background-size: 100% 100%;
        opacity: 0.3;
    }

效果如下：