它是网页的材料设计错误吗

Question

插入背景 (svg) 后，我的 mdc 卡右侧有空白区域。 示例在 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>

请告诉我如何解决这个问题，因为我必须设计一个带有背景的注册表单，我不能放置这样的图像，因为我已经在上面放置了文本字段和其他东西，所以它必须在背景中。

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;
}