Question

我试图将一个半透明的彩色div叠加在背景图像上，形状为'＃34;孔＆＃34; （如六边形）在div的中间，这样我们就可以通过＆＃34; hole＆＃34;清楚地看到背景图像。有人可以建议我使用CSS3实现它的最优雅方式吗？我可以使用CSS3制作六边形，但我不知道如何制作它＆＃34; chisel＆＃34;通过另一个形状的div。

Answer 1

使用CSS的一种可能性是在伪元素上设置多个背景

例如

.test {
    left: 0px;
    top: 0px;
    width: 400px;
    height: 300px;
    position: relative;
    border: solid 1px black;
    background-image: url(http://placekitten.com/500/400);
    background-size: cover;
}


.test:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background-image: linear-gradient(-60deg,transparent 60px, rgba(200,290,0,0.5) 51px), 
                      linear-gradient(60deg,transparent 60px, rgba(200,290,0,0.5) 51px),
                      linear-gradient(120deg,transparent 60px, rgba(200,290,0,0.5) 51px),
                      linear-gradient(-120deg,transparent 60px, rgba(200,290,0,0.5) 51px),
                      linear-gradient(0deg,transparent 120px, rgba(200,290,0,0.5) 51px),
                      linear-gradient(180deg,transparent 120px, rgba(200,290,0,0.5) 51px);
    background-size: 33% 50%, 33% 50%, 33% 50%, 33% 50%, 34% 50%, 34% 50%;
    background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 0%, 50% 100%;
    background-repeat: no-repeat;
}

这会创建一个带有黄色半透明框架的六边形

fiddle

Answer 2

我会使用图片来简化。这是一个例子：

http://jsfiddle.net/WREV3/17/

and some code

我们怎样才能＆＃34;凿子＆＃34;一个div？

2 个答案: