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

使用CSS3

clip path

选项，我可以轻松地剪裁元素，以便只有指定的区域可见。这很酷，但是有没有一种方法可以排除某个区域，以便除指定路径之外的所有路径都可见

下面是我想做的一个例子。我需要画一个圆圈：

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

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

---

谢谢

这有点麻烦，但如果背景是图像，这可能会有帮助。在上方放置一个圆圈，并将背景视为精灵。注释掉

content

div以查看完整的背景图像：

#容器{
宽度：400px；
高度：200px；
背景：url（'http://lorempixel.com/400/200');
文本对齐：居中；
}
#内容{
宽度：80%；
身高：100%；
背景：银；
文本对齐：居中；
显示：内联块；
}
#圈{
宽度：100px；
高度：100px；
边界半径：50%；
背景：url（'http://lorempixel.com/400/200“）150px 50px；
背景位置：中心；
位置：固定；
顶部：58px；
左：158px；
}

Lorem ipsum amet sint dolor等

这是您的主要内容区域

确定这是可能的。使用

剪辑路径

！假设您的

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("}")

下面是它的样子：

.excludecorcle{
-webkit剪辑路径：多边形(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%);
剪辑路径：多边形(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{
宽度：300px；
高度：200px；
}
身体{
背景颜色：绿色；
}

这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本d、 这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本声音。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是背景中的文本。这是bac中的文本kground。这是背景中的文本。这是背景中的文本。