时间戳

首页 > 解决方案 > 是否可以将方形图像放在椭圆形图像上？

html - 是否可以将方形图像放在椭圆形图像上？

问题描述

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

标签： htmlcssimage-clipping

解决方案

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

推荐阅读