есть такой файл в формате svg. Как задать, чтобы красная часть данного svg была заполнена картиной. CodePen
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="699px">
<path fill-rule="evenodd" fill="rgb(202, 3, 3)"
d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/>
</svg>
Чтобы разместить фоновое изображение внутри криволинейной области, необходимо использовать команду svg clipPath
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="699px">
<defs>
<clipPath id="clip">
<path
d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/>
</clipPath>
</defs>
<image xlink:href="https://i.stack.imgur.com/ZdNGI.jpg" width="100%" height="100%" clip-path="url(#clip)" />
</svg>
Вырезание картинки с помощью mask
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="699px">
<defs>
<mask id="msk1">
<path fill="white"
d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/>
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/ZdNGI.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>
У маски в отличии от clipPath
более широкие возможности. Можно одновременно показать обе части изображения с разной прозрачностью.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="699px">
<defs>
<mask id="msk1">
<rect width="100%" height="100%" fill="grey" />
<path fill="white"
d="M0.000,-0.000 L1920.000,-0.000 L1920.000,615.999 C1920.000,615.999 1407.000,767.999 964.000,659.999 C496.367,545.994 0.000,615.999 0.000,615.999 L0.000,-0.000 Z"/>
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/ZdNGI.jpg" width="100%" height="100%" mask="url(#msk1)" />
</svg>
Эта техника универсальна.
Блок может быть добавлен в любую часть HTML вёрстки.
В примере ниже показано, как это может быть использовано в качестве анимируемой шапки сайта.
JS
. В примере - Site Daniel Детали реализации
Эффект анимации достигается изменением аттрибута "d" патча, который входит в состав маски.
<animate attributeName="d" ..../>
Маска состоит из двух частей:
fill="white"
полупрозрачная часть это, - прямоугольник на всю ширину
<rect width="100%" height="100%" fill="red"/>
Более подробно о масках здесь
Смотрите в полный экран, иначе не увидите анимации, она внизу
<div class="container">
<svg viewBox="0 0 500 220" preserveAspectRatio="none" style="height: 100%; width: 100%;">
<mask id="msk1" >
<rect width="100%" height="100%" fill="red"/>
<g transform="translate(0 130)">
<path transform="translate(0 -100)" d="M-1.41,149.50 C235.60,121.88 316.87,102.13 501.97,149.50 L500.00,0.00 L0.00,0.00 Z" style="stroke: none; fill:white;">
<animate
attributeName="d"
dur="10s"
repeatCount="indefinite"
values="
M-1.41,149.50 C235.60,121.88 316.87,102.13 501.97,149.50 L500.00,0.00 L0.00,0.00 Z;
M-1.41,129.77 C178.61,82.39 314.61,149.50 501.97,149.50 L500.00,0.00 L0.00,0.00 Z;
M-1.41,149.50 C235.60,121.88 316.87,102.13 501.97,149.50 L500.00,0.00 L0.00,0.00 Z" />
</path>
</g>
</mask>
<image xlink:href="https://i.stack.imgur.com/J8XTf.jpg" width="100%" height="100%" mask="url(#msk1)" />
<text x="50" y="155" font-size="36" fill="red">Site Daniel </text>
</svg>
</div>
Если у вас есть область в svg, вы вполне её можете использовать как маску для своего background свойства
.custom-block{
height: 800px;
-webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyANCiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogd2lkdGg9IjEwMCUiIGhlaWdodD0iNjk5cHgiPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiAgZmlsbD0icmdiKDIwMiwgMywgMykiDQogZD0iTTAuMDAwLC0wLjAwMCBMMTkyMC4wMDAsLTAuMDAwIEwxOTIwLjAwMCw2MTUuOTk5IEMxOTIwLjAwMCw2MTUuOTk5IDE0MDcuMDAwLDc2Ny45OTkgOTY0LjAwMCw2NTkuOTk5IEM0OTYuMzY3LDU0NS45OTQgMC4wMDAsNjE1Ljk5OSAwLjAwMCw2MTUuOTk5IEwwLjAwMCwtMC4wMDAgWiIvPg0KPC9zdmc+');
background: yellow;
-webkit-mask-repeat: no-repeat;
width: 100%;
}
body{
background: blue;
}
<div class="custom-block"></div>
Примечание:
1) в mask-image: можно передать изображение теми же способами что и в background-image
2) когда у дива есть свойство mask-image, background будет работать в его рамках, те вы вполне сможете вставить туда и картинку и цвет и градиент и вообще все что поддерживает свойство background
3) насчет поддержки можете посмотреть здесь https://caniuse.com/#feat=css-masks
Фрилансер или Digital-агентство - Как сделать правильный выбор?
Появилась проблемаА конкретно, при выводе формы в шаблон, поле IntegerField, имеет стандартную джанговскую отрисовку, соответственно теряется...