Question

我尝试过使用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>

Answer 1

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

和html

<div class="wrap">
   <div>
   </div>
</div>

是否可以在椭圆形图像上放置正方形图像？

1 个答案: