CSS剪辑路径的替代方案

Question

使用不同的方法，我可以用什么方法来替换相同的东西？

SVG以外的东西。

https://jsfiddle.net/y7037j2p/14/

 #img1 {
    clip-path: circle(85px at center);
  }

Answer 1

您可以使用

#img1 {
  border-radius: 25% / 70%;
}

＆＃13;

＆＃13;

  #container {
    background-color: black;
    position: relative;
    width: 260px;
    height: 194px;
    padding: 0;
    border: 3px solid #0059dd;
  }
  
  #img1,
  #img2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  #img1 {
  border-radius: 25% / 70%;
}
  
  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    cursor: pointer;
    background-color: transparent;
    ;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }
  
  #playButton4 {
    position: relative;
    width: 260px;
    height: 194px;
    cursor: pointer;
  }
  
  .button div {
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    position: absolute;
  }

＆＃13;

<div id="container">
  <img id="img1" width="170" height="113" src="https://i.imgur.com/BO6KOvw.jpg">
  <img id="img2" width="180" height="180" src="https://i.imgur.com/4HJbzEq.pn">
  <div id="grad">





    <div id="playButton4" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

      <div class="button">
        <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
        </div>
        <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
        </div>
      </div>
    </div>
  </div>
</div>

<audio id="player4" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
  </source>
</audio>

＆＃13;

＆＃13;

＆＃13;