剪辑路径插图圈？ [英] Clip path inset circle?

问题描述

是否可以创建插入圆形剪辑路径，以便剪辑路径有效地穿过中心的div，而不是只显示中心？

Is it possible to create an inset circle clip path so that the clip path would effectively cut a hole through the div in the center opposed to only showing the center?

>

我想使用剪辑路径或类似的东西，以便我可以在图片和内容后面div和剪辑路径将被用来揭示这一点。所以div（从我的jsfiddle的蓝色div）将从中心消失，使用一个过渡来显示其背后的内容。

I would like to use clip path or something similar so that I can have stuff (images and content) behind the div and the clip path will be used to reveal this. So the div (blue div from my jsfiddle) will disappear from the center using a transition to show the content behind it.

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

<div></div>

a href =https://jsfiddle.net/pm4yvbxn/ =nofollow noreferrer> https://jsfiddle.net/pm4yvbxn/

https://jsfiddle.net/pm4yvbxn/

推荐答案

我不认为你可以实现这个与 clip-path 但你可以切一个洞在 div 使用 radial-gradient 背景图片。

I don't think you can achieve this with clip-path but you can certainly cut a hole in a div using the radial-gradient background images. This has much better browser support than clip-path too.

注意：这个浏览器支持比 clip-path 方法（和 box-shadow ）将仅在覆盖以下内容的元素具有彩色填充时工作。如果不是 sandybrown color，则需要在顶部有另一个图像，否则这些方法将不起作用，因为它们实际上并不切割一个洞他们只是模仿了效果。

Note: This approach (and box-shadow ) will work only when the element that is covering the content below has a colored fill. If instead of sandybrown color, there needs to be another image on top then these approaches will not work because they don't actually cut a hole, they just mimic that effect.

.div-with-hole {
  height: 100vh;
  background: radial-gradient(circle at center, transparent 25%, sandybrown 25.5%);
  background-size: 100% 100%;
  background-position: 50% 50%;
  transition: all 2s ease;
}
.div-with-hole:hover {
  background-size: 400% 400%; /* should be 100% * (100 / transparent % of radial gradient */
}
body {
  background: url(http://lorempixel.com/800/800/nature/1);
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

<div class='div-with-hole'></div>

这篇关于剪辑路径插图圈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！