У меня есть <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,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/
[Edit] Для полноты, я также использовал деревянную текстуру как фоновое изображение для пути svg.
Это выглядит очень хорошо! Как вы вычисляете пути? Могут ли пути динамически создаваться, если я должен переставить окно? – CR41G14
Простая математика :) Внешний прямоугольник имеет следующие пути (по координатам x, y) - 0,0 -> 225,0 -> 225,300 -> 0,300. Внутренний прямоугольник имеет следующие пути (рассчитанные по вашим характеристикам в оригинальной скрипке) - 165,10 -> 215,10 -> 215,80 -> 165,80. Я добавил дополнение 100px только для перемещения элемента svg с границы, чтобы вы могли лучше визуализировать реальную «прозрачность» окна. – Terry
Я рекомендую использовать холст HTML5. http://www.html5canvastutorials.com
Есть ли у вас примеры того, как это можно достичь с помощью холста?Поскольку моя дверь не статична, я не уверен, что это может быть вариант – CR41G14
Вы имеете в виду вот это? http://jsfiddle.net/UWyvz/3/
В основном я использовал дерево и создал окно.
Нет, я копировал window, но назвал его windowpane, затем установите оконное стекло-х z-index быть ниже, чем у window-х и установите background-color из windowpane до белого.
Спасибо за ответ, но мне нужно было бы более реалистично смотреть на тот момент, когда пример все еще не выглядит прозрачным. – CR41G14
Просто опустите непрозрачность класса 'window' ? Например: http://jsfiddle.net/UWyvz/6/ – mattytommo
@mattytommo - окно не двойное остекление и широко открытое для взлома. Лучше всего бэтмен на этом! –
Возможно, это немного «уродливое исправление», но оно работает: используя 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;
}
EDIT
Обновленный код, чтобы увидеть эффект "сквозной". Границы не идеальны, но я надеюсь, что вы получите эту идею.
Вместо того, чтобы «разрезать отверстие» в div, в зависимости от ваших потребностей, вы можете поместить фон в окно над дверью div. – gpasci
Спасибо за ваши комментарии, я мог бы использовать фоновое изображение для имитации прозрачности, я не могу использовать холст, поскольку дверь 3D и перемещается вокруг – CR41G14
Я бы рекомендовал использовать метод '