html - css:从元素中排除(隐藏)特定区域

Question

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

这是我想做的一个例子。我需要切出一个圆圈:

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

据我所知，一种方法是使用 Canvas ，但使用纯 CSS 是否可行？

谢谢!

Answer 1

当然可以。使用剪辑路径!假设您的 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("}")

这是它的样子:

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

<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"/>

编辑:此方法的一个问题是它确实会生成椭圆形。您可以通过在圆圈中使用 px(如果您知道元素的最小尺寸)或使用 x 半径和 y 半径(如果您知道相对尺寸)来解决此问题。如果您一无所知，则需要一些 js...