它是网站的材料设计错误吗？

Question

我的mdc卡在插入背景（svg）后在右侧有空白。 实施例是在codepen https://codepen.io/BhavyaSingh2003/pen/ZwByBy

body,
html {
  height: 100%;
}

.mycard {
  height: 90%;
  width: 90%;
  margin-right: 5%;
  margin-left: 5%;
  background-image: url("https://svgshare.com/i/Aut.svg");
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet"/>


<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<div class="mdc-card mycard">
</div>

请告知如何解决这个因为我要设计与背景注册表单，我不能把这样的形象，因为我已经把文本框和其他的东西上它，所以它必须是在后台。< / p>

Answer 1

如果愿意，可以添加此自定义解决方案。但这不是完美的解决方案。

body,html{
  height:100%;
margin:0px;
}
.mycard {
  height: 90%;
  width: 90%;
}


.mdc-card.mycard:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(https://svgshare.com/i/Aut.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    right: -20%;
    top: 0;
    background-position: right;
    white-space: unset;
}