我尝试使用CSS创建一个椭圆形，然后将图像放在上面。
但是背景蛋形状需要是一个图像。
我可以在图像上使用图像获得相同的外观吗？
因此，背景粉红色阴影是一个图像，小猫图像将被剪辑在背景粉红色图像中。
任何帮助将不胜感激。谢谢。
.wrap {
background-color: #FCF7FB;
display: flex;
align-items:center;
overflow: hidden;
width: 40em;
height: 60em;
margin-top:0.1em;
margin-left:12em;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(170deg) skew(4deg);
-webkit-transform: rotate(170deg) skew(4deg);
}
.wrap div {
display: flex;
align-items:center;
transform: rotate(-170deg) skew(-4deg);
-webkit-transform: rotate(-170deg) skew(-4deg);
border-radius: 10%/50%;
height:60em;
width:100%;
}
.wrap img{
width:110%;
margin-left:-2em;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrap">
<div>
<img src="http://placekitten.com/1920/780" />
</div>
</div>
</body>
</html>.wrap {
background:red;
display: flex;
align-items:center;
overflow: hidden;
width: 40em;
height: 60em;
margin-top:0.1em;
margin-left:12em;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
transform: rotate(170deg) skew(4deg);
-webkit-transform: rotate(170deg) skew(4deg);
}
.wrap div {
display: flex;
align-items:center;
transform: rotate(-170deg) skew(-4deg);
-webkit-transform: rotate(-170deg) skew(-4deg);
border-radius: 10%/50%;
height:60em;
width:100%;
}
.wrap div::after{
content:"";
width:110%;
margin-left:-5%;
float:left;
height:60em;
background: url(http://placekitten.com/1920/780) center center no-repeat;
background-size:contain;
}
和网页
<div class="wrap">
<div>
</div>
</div>