jquery - ドアに穴を開ける？

Question

私は<div>木の繰り返しの背景画像を持つ を持っています。

私は今、窓のためにこれに穴を開けたいと思っています。HTMLとCSSでこれを行う方法はありますか? Javascript を歓迎します。

jsFiddleでこの例を参照してください

Answer 1

簡単です - 要素内のパスを使用してドアを描画します<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 パスの背景画像として木製のテクスチャも使用しました。

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

JSFiddle。

編集

「シースルー」効果を確認するためにコードを更新しました。境界線は完璧ではありませんが、理解していただければ幸いです。

Answer 3

こんな感じですか？http://jsfiddle.net/UWyvz/3/

基本的に木材を使用して窓ガラスを作成しました。

いや、私は を複製しましたwindowが、それを と呼びwindowpane、ウィンドウ ペインを のz-indexそれよりも低くwindow設定し、background-colorのwindowpaneを白に設定しました。

Answer 4

私はcanvashtml5を使用することをお勧めします。http://www.html5canvastutorials.com