在div中通过background-image，background-position，background-size属性获取一张图的部分，div中不显示

在div中通过div元素选择器一次性给URL图和通过类选择器一次一次给URL图为什么使用background-image，background-position，background-size属性获取一张图的部分，div中显示结果不一样？类选择器一次一次给URL图在div中通过background-image，background-position，background-size属性获取一张图的部分，div中不显示。

我想要达到的结果

img

写出的代码截图

img

img

圈出来的background-position样式中的100px全部改为-100px，方向搞错了

img


改下面就行了

img

<!doctype html>
<style>
    div {
        background-image: url(https://zy.forerunnercollege.com/log200.png);
        background-repeat: no-repeat;
        background-size: 200px 200px;
        width: 100px;
        height: 100px
    }

    .div1 {
        background-position: 0 0;
    }

    .div2 {
        background-position: -100px 0;
    }

    .div3 {
        background-position: 0 -100px;
    }

    .div4 {
        background-position: -100px -100px;
    }
</style>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

img

有报错吗？

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632