css：从元素中排除（隐藏）特定区域

Question

使用CSS3 clip-path选项，我可以轻松地剪切元素，以便只显示指定的区域。这很酷，但有没有办法排除某个区域，以便除了指定路径之外的所有都可见？

以下是我想要做的一个例子。我需要切出一个圆圈：

放置一个圆圈不是一种选择，因为我需要底层背景可见。

AFAIK一种方法是使用canvas，但是纯CSS可以吗？

谢谢！

Answer 1

当然可以。使用clip-path！想象一下，你的div是一张纸而clip-path是一把剪刀。如果你想在中间切出一个圆圈，你可以在边缘周围切割，沿着一条线切入中间，围绕一个圆圈，然后沿着同一条线回到边缘。

我将一个输出CSS的python脚本混在一起。道歉......

import math

# radius in percent of width
radius = 0.25
# xy pos in percent
xPos = 0.5
yPos = 0.5
# number of points around the circle
# size of css is approx proportional to this 
smooth = 50



# from here, just go around the outline of the shape

x = []
y = []

x.append(0)
y.append(0)

x.append(0)
y.append(1)

x.append(xPos - radius)
y.append(1)

x.append(xPos - radius)
y.append(yPos)

angleZero = math.pi
increment = 2 * math.pi / smooth

numDigits = 3

for k in range(0, smooth):
 angle = angleZero - k * increment
 x.append( round( xPos + radius * math.cos(angle), numDigits ) )
 y.append( round( yPos - radius * math.sin(angle), numDigits ) )

x.append(xPos - radius)
y.append(yPos)

x.append(xPos - radius)
y.append(1)

x.append(1)
y.append(1)

x.append(1)
y.append(0)

cssValue = "polygon(";
for k in range(0, len(x) - 1):
  cssValue += str( abs(x[k]*100) ) + "% " + str( abs(y[k]*100) ) + "%, "
cssValue += str( abs(x[len(x) - 1]*100) ) + "% " + str(abs( y[len(x) - 1]*100) ) + "%);"

property = "clip-path: "
spaces = "    "
print(".excludeCircle{");
print(spaces + "-webkit-"+property + cssValue)
print(spaces + property + cssValue)
print("}")

这就是它的样子：

＆＃13;

＆＃13;

.excludeCircle{
    -webkit-clip-path: polygon(0% 0%, 0% 100%, 25.0% 100%, 25.0% 50.0%, 25.0% 50.0%, 25.2% 46.9%, 25.8% 43.8%, 26.8% 40.8%, 28.1% 38.0%, 29.8% 35.3%, 31.8% 32.9%, 34.1% 30.7%, 36.6% 28.9%, 39.4% 27.4%, 42.3% 26.2%, 45.3% 25.4%, 48.4% 25.0%, 51.6% 25.0%, 54.7% 25.4%, 57.7% 26.2%, 60.6% 27.4%, 63.4% 28.9%, 65.9% 30.7%, 68.2% 32.9%, 70.2% 35.3%, 71.9% 38.0%, 73.2% 40.8%, 74.2% 43.8%, 74.8% 46.9%, 75.0% 50.0%, 74.8% 53.1%, 74.2% 56.2%, 73.2% 59.2%, 71.9% 62.0%, 70.2% 64.7%, 68.2% 67.1%, 65.9% 69.3%, 63.4% 71.1%, 60.6% 72.6%, 57.7% 73.8%, 54.7% 74.6%, 51.6% 75.0%, 48.4% 75.0%, 45.3% 74.6%, 42.3% 73.8%, 39.4% 72.6%, 36.6% 71.1%, 34.1% 69.3%, 31.8% 67.1%, 29.8% 64.7%, 28.1% 62.0%, 26.8% 59.2%, 25.8% 56.2%, 25.2% 53.1%, 25.0% 50.0%, 25.0% 100%, 100% 100%, 100% 0%);
    clip-path: polygon(0% 0%, 0% 100%, 25.0% 100%, 25.0% 50.0%, 25.0% 50.0%, 25.2% 46.9%, 25.8% 43.8%, 26.8% 40.8%, 28.1% 38.0%, 29.8% 35.3%, 31.8% 32.9%, 34.1% 30.7%, 36.6% 28.9%, 39.4% 27.4%, 42.3% 26.2%, 45.3% 25.4%, 48.4% 25.0%, 51.6% 25.0%, 54.7% 25.4%, 57.7% 26.2%, 60.6% 27.4%, 63.4% 28.9%, 65.9% 30.7%, 68.2% 32.9%, 70.2% 35.3%, 71.9% 38.0%, 73.2% 40.8%, 74.2% 43.8%, 74.8% 46.9%, 75.0% 50.0%, 74.8% 53.1%, 74.2% 56.2%, 73.2% 59.2%, 71.9% 62.0%, 70.2% 64.7%, 68.2% 67.1%, 65.9% 69.3%, 63.4% 71.1%, 60.6% 72.6%, 57.7% 73.8%, 54.7% 74.6%, 51.6% 75.0%, 48.4% 75.0%, 45.3% 74.6%, 42.3% 73.8%, 39.4% 72.6%, 36.6% 71.1%, 34.1% 69.3%, 31.8% 67.1%, 29.8% 64.7%, 28.1% 62.0%, 26.8% 59.2%, 25.8% 56.2%, 25.2% 53.1%, 25.0% 50.0%, 25.0% 100%, 100% 100%, 100% 0%);
}

img{
  width: 300px;
  height: 200px;
}

body{
  background-color: green;
}

＆＃13;

<div style="position: absolute;">
  This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background. This is text in the background.
</div>
<img src="http://i.stack.imgur.com/l2ETg.png" class="excludeCircle"/>

＆＃13;

＆＃13;

＆＃13;

编辑：这种方法的一个问题是它确实是一个椭圆形。您可以通过在圆圈中使用px（如果您知道元素的最小尺寸）或具有x半径和y半径（如果您知道相对大小）来解决此问题。如果你什么都不知道，你需要一些js ......

Answer 2

这有点小提琴，但如果背景是图片，这可能有助于。放置一个圆圈，并将背景视为精灵。注释掉content div以查看完整的背景图片：

＆＃13;

＆＃13;

#container {
  width: 400px;
  height: 200px;
  background: url('http://lorempixel.com/400/200');
  text-align:center;
}
#content {
  width: 80%;
  height: 100%;
  background: silver;
  text-align: center;
  display:inline-block;
}
#circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: url('http://lorempixel.com/400/200') 150px 50px;
  background-position: center;
  position: fixed;
  top: 58px;
  left: 158px;
}

＆＃13;

<div id="container">
  <div id="content">
    <br>
    <p>
      Lorem ipsum amet sint dolor etc.</p>
    <p>This is your main content area</p>
  </div>
  <div>
    <div id="circle"></div>

＆＃13;

＆＃13;

＆＃13;