在一扇門上打個洞？

我有一個<div>其中有一個木重複的背景圖像。在一扇門上打個洞？

我現在想在這個窗口打個洞。有沒有辦法在HTML和CSS中做到這一點？ Javascript歡迎。

查看jsFiddle

來源

2013-02-26 CR41G14

取決於您的需求，您可以將背景放入門格上方的窗口中，而不是在div中「切割一個洞」。 – gpasci 2013-02-26 15:17:42

感謝您的意見，我可以使用背景圖像來模擬透明度，我不能使用畫布，因爲門是3D並且可以移動 – CR41G14 2013-02-26 15:19:31

我建議使用' Terry 2013-02-26 16:00:01

很簡單 - 使用<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-26 15:56:31 Terry

這看起來非常好！你如何計算路徑？如果我要重新定位窗口，路徑是否可以動態創建？ – CR41G14 2013-02-26 17:17:21

簡單數學:) 外部矩形具有以下路徑（在x，y座標中） - 0,0 - > 225,0 - > 225,300 - > 0,300。內部矩形具有以下路徑（根據您在原始提琴中的規格計算） - 165,10 - > 215,10 - > 215,80 - > 165,80。我已經添加了100px填充只是爲了從邊框移動svg元素，所以你可以更好地可視化窗口的真實「透明度」。 – Terry 2013-02-26 17:31:38

我建議使用HTML5的畫布這個例子。 http://www.html5canvastutorials.com

來源

2013-02-26 15:16:29 Maetschl

您是否有任何關於如何使用畫布可以實現的例子？由於我的門不是靜態的，我不確定這是否可以作爲選項 – CR41G14 2013-02-26 15:25:37

您的意思是這樣的？ http://jsfiddle.net/UWyvz/3/

我基本上使用了一些木材並創建了一個窗格。

不，我複製了window，但稱它windowpane，然後將窗玻璃的z-index到比window的的較低並設置windowpane的background-color爲白色。

來源

2013-02-26 15:19:09 mattytommo

感謝您的回答，但我現在需要更逼真的樣子，但該示例仍然不透明 – CR41G14 2013-02-26 15:24:41

只需降低'window'類的不透明度？像這樣：http://jsfiddle.net/UWyvz/6/ – mattytommo 2013-02-26 15:26:25

@mattytommo - 窗戶不是雙層玻璃，並且對竊賊很大。最好讓這個蝙蝠俠！ – 2013-02-26 16:17:48

可能是一個「醜陋的修補程序」，但它的工作原理：使用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。

編輯

更新的代碼，看到了「透視」效果。邊界並不完美，但我希望你明白這一點。

來源

2013-02-26 15:26:33 MarcoK

感謝您的建議，這是一種替代方案，因爲它確實比其他建議更好地模仿切出 – CR41G14 2013-02-26 15:40:19

這是一個相當巧妙的解決方案 - 從來沒有想到它，嘿。 – Terry 2013-02-27 09:45:36

在一扇門上打個洞？

回答

相關問題