css - クリップ パス挿入円?

Question

挿入円クリップ パスを作成して、クリップ パスが中央のみを表示するのではなく、中央の div に効果的に穴を開けられるようにすることはできますか?

次のようなものを作成するために、中央に切り取られた穴を除いて、すべての div を表示する必要があります。

クリップ パスなどを使用して、div の背後にあるもの (画像とコンテンツ) を保持できるようにしたいと思います。クリップ パスを使用してこれを明らかにします。したがって、div (jsfiddle の青い div) は、トランジションを使用して中央から消え、その背後にあるコンテンツを表示します。

div {
  background: blue;
  width: 200px;
  height: 200px;
  -webkit-clip-path: circle(50px at center);
}

<div></div>

https://jsfiddle.net/pm4yvbxn/

Answer 1

疑似要素box-shadowでこれを行うこともできます:after

div {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
  background: url('http://planetcompas.com/live/wp-content/uploads/2013/04/2015-01-Beautiful-Planet-And-Space-4-Cool-Wallpapers-HD.jpg');
  background-size: cover;
  background-position: center;
}
div:after {
  width: 50px;
  height: 50px;
  content: '';
  border-radius: 50%;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 0px 300px lightblue;
  transition: all 0.3s linear;
}
div:hover:after {
  opacity: 0;
}

<div></div>

Answer 2

に要素を追加することでそれを行うことができます<div>。

私は使用し<span>ました。ここにコードがあります

HTML

<div>
  <span></span>
</div>

CSS

div{
  background: blue;
  width: 200px;
  height: 200px;
  -webkit-clip-path: circle(50px at center);
  position:relative;
}
div span{
  position:absolute;
  display:block;
  width:30px;
  height:30px;
  border-radius:100%;
  background:#fff;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

例: https://jsfiddle.net/pm4yvbxn/2/

border-radius丸みを帯びた境界線に div を使用することもできます。