jquery – 在门上开一个洞？

参见英文答案 > Creating a hole in a <div> element                                    9个
我有一个< div>它有木材重复的背景图像.

我现在想在这个窗口切一个洞.有没有办法在HTML和CSS中做到这一点？欢迎Javascript.

请参阅jsFiddle上的此示例

解决方法

这很简单 – 使用< svg>中的路径绘制门.元件.

<svg  xmlns="http://www.w3.org/2000/svg" id="svg-door">
    <defs>
         <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
             <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768" />
        </pattern>
    </defs>
    <path xmlns="http://www.w3.org/2000/svg" d="
        M0,0 225,300 0,300 z
        M165,10,215,10 215,80 165,80 z
    " fill="url(#wood)" fill-rule="evenodd"/>
</svg>

CSS：

#svg-door {
   background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
    background-size: cover;
    Box-sizing: border-Box;
    padding: 100px;
    width: 100%;
    height: 500px;
}

这种方法的优点是你的背景可以是任何东西,窗口是一个真正的窗口(透视).

我已经预先计算了你的路径,你可以在我用你的小提琴创建的前叉中找到新门 – http://jsfiddle.net/teddyrised/qS4G7/

[编辑]为了完整起见,我还使用木质纹理作为svg路径的背景图像.