为什么我的西游四人组这个样子

#我的西游四人行

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>大话西游</title>
  <style>
    body{
      /*外边距*/
        margin: 0px;
        background-image: url("images/background.jpg")
    }
    .west{
      /*高度*/
      width:760px;
       /*宽度*/
      height:180px;
       /*上下左左右边距自动相等*/
       margin: 300px auto;
        /*颜色*/
    }
    .role{
      /*从左到右，横排显示*/
      float: left;
      width: 190px;
      height: 240px;
      background-repeat:no-repeat;
      background-position-y: center;
    }
    /*选择到第几个class标签叫做west的子元素*/
    .role:nth-child(1){
      background-image: url('images/wk.png');
      animation: wk 1.4s steps(8) infinite;
      
    }
    .role:nth-child(2){
      background-image: url('images/bj.png');
      animation: bj 1.4s steps(8) infinite;
    }
    .role:nth-child(3){
      background-image: url('images/ts.png');
      animation: ts 1.4s steps(8) infinite;

    }
    .role:nth-child(4){
      background-image: url('images/ss.png');
      animation: ss 1.4s steps(8) infinite;

    }
    @keyframes wk{
      0%{
        background-position-x: 0px;
      }
      100%{
        background-position-x: -1600px;
      }
    }

@keyframes bj{
      0%{
        background-position-x: 0px;
      }
      100%{
        background-position-x: -1600px;
      }
    }
    @keyframes ts{
      0%{
        background-position-x: 0px;
      }
      100%{
        background-position-x: -1360px;
      }
    }
    @keyframes ss{
      0%{
        background-position-x: 0px;
      }
      100%{
        background-position-x: -1680px;
      }
    }
  </style>
</head>

<body>

  <div class="west">
    <div class="role"></div>
    <div class="role"></div>
    <div class="role"></div>
    <div class="role"></div>
  </div>

</body>

</html>
```？

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/970425307646192.png "#left")

很明显你的png图片不是透明的，还存在白色的底，需要去掉的

看不到效果图

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