Использование div как обтравочной маски в css

Question

У меня есть фоновое изображение с фоном: обложка; к нему прилагалась серия разделов, которые я хотел бы сделать индивидуальными обтравочными масками.

Я рассмотрел функциональный клип: rect (20px, 20px, 20px, 20px,); однако, поскольку divs вводятся через систему CMS, будет нецелесообразно определять размер набора.

Есть ли способ установить div с помощью свойства обтравочной маски, чтобы он фиксировал изображение в любом месте, где находится div на странице?

Я не особенно хочу использовать наложение изображений, так как этот сайт будет реагировать.

Answer 1

Если я правильно понял, вы просто ищете оверлей, размер которых изменится с размером экрана, а div с фоновым изображением?

В этом случае, если это возможно, почему бы просто не добавить эти divs в раздел div, который требует обрезки, например this. Для этой цели я использовал только один div с прозрачным фоном и рамкой, применяемой к нему. Если вам нужно закрепить изображение в непрямоугольной форме, вам понадобится больше div (например, для параллеллограммы, алмаза, треугольной формы вам потребуется не менее 2).

Кроме того, к сожалению, CSS не допускает% границ, но я думаю, что этот пример

Вы также можете сделать это наоборот и разместить IMG DIV внутри клипер дивы; только вопрос о том, что лучше всего подходит ...

Код для ссылки:

HTML:

<div id="tobeClipped"> 
    <div id="clippers"></div> 
    </div> 

CSS:

body, html { 
    /* necessary for sizing children in % */ 
    width: 100%; 
    height: 100%; 
} 
#tobeClipped { 
    width: 80%; 
    height: 40%; 
    position: relative; 
    background-image: url('http://cdn.theatlantic.com/static/infocus/ngpc112812/s_n01_nursingm.jpg'); 
    background-size: cover; 
} 
#tobeClipped>div { 
    position: absolute; 
} 
#clippers { 
    width: 100%; 
    height: 100%; 
    border: 20px solid grey; 
    border-left-width: 100px; 
    box-sizing: border-box; 
} 

Пожалуйста, уточнить, если это не совсем то, что вы искали.

Answer 2

Свойство clip-path CSS может быть применен ко всем HTML-элементов, SVG графических элементов и SVG элементов контейнера:
http://www.html5rocks.com/en/tutorials/masking/adobe/