3

我有一个<div>木头重复的背景图像。

我现在想在这上面切一个洞来做一扇窗户。有没有办法在 HTML 和 CSS 中做到这一点？欢迎使用 Javascript。

请参阅jsFiddle上的此示例

4

4 回答 4

3

<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,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 路径的背景图像。

于 2013-02-26T15:56:31.673 回答
2

你的意思是这样吗？http://jsfiddle.net/UWyvz/3/

我基本上使用了一些木头并创建了一个窗格。

不，我复制了window，但将其命名为windowpane，然后将窗格设置z-index为低于window' 并将 of 设置background-color为windowpane白色。

于 2013-02-26T15:19:09.423 回答
2

可能有点“丑陋的修复”，但它有效：使用border-property模拟门（元素实际上是窗户）。

HTML

<div class="door"></div>

CSS

body {
    background-image:url("http://wallpapers.free-review.net/wallpapers/42/Sun_in_white_cloud.jpg");
}
.door {
    height:70px;
    width:50px;
    background-color:rgba(0, 0, 255, 0.4);
    border-left: 175px solid orange;
    border-top: 10px solid orange;
    border-right: 10px solid orange;
    border-bottom: 230px solid orange;
    border-image:url("http://roundsquarewoodworking.com/wp-content/uploads/2010/07/wood-texture-background.jpg") 25% repeat;
}

JSF中。

编辑

更新代码以查看“透视”效果。边界并不完美，但我希望你能明白。

于 2013-02-26T15:26:33.910 回答
0

我建议使用 canvas html5。http://www.html5canvastutorials.com

于 2013-02-26T15:16:29.130 回答