3

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

Меня очень заинтересовал вот этот вопрос. Не сомневаюсь, что многие задавались таким вопросом. Однако, к сожалению, этот вопрос закрыт и ответа на него нет. Мне стало интересно, возможно ли это сделать, учитывая, что такой прозрачный блок, сквозь который будет виден общий фон, расположенный на заднем плане, на странице может быть не один. В данном случае это два блока в виде шестиугольников, причем расположены они на расстоянии друг от друга.

Приводить в вопросе какой-либо первоначальный код попыток абсолютно бессмысленно, так как он будет ограничен написанием только лишь фигур шестиугольников. Но тем не менее, не буду игнорировать установленные правила на SO. Вот, что у меня получилось:

* {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: url('https://images.wallpaperscraft.ru/image/volny_more_priboj_pena_109857_1280x720.jpg') center center;
  background-size: cover;
}

.hexagon {
  position: relative;
  margin: 70px 0 0 10px;
  width: 190px;
  height: 110px;
  background-position: center center;
  z-index: 1;
  background-color: cornflowerblue;
}

.two {
  position: absolute;
  top: 180px;
  left: 110px;
}

.hexagon .face1,
.hexagon .face2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: inherit;
  z-index: -1;
  backface-visibility: hidden;
}

.hexagon .face1:before,
.hexagon .face2:before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  background: inherit;
}

.hexagon .face1 {
  transform: rotate(60deg);
}

.hexagon .face1:before {
  left: 0;
  transform-origin: left top;
  transform: rotate(-60deg) translate(-110px, 0);
}

.hexagon .face2 {
  transform: rotate(-60deg);
}

.hexagon .face2:before {
  right: 0;
  transform-origin: right top;
  transform: rotate(60deg) translate(110px, 0);
}
<div class="hexagon">
  <div class="face1"></div>
  <div class="face2"></div>
</div>
<div class="hexagon two">
  <div class="face1"></div>
  <div class="face2"></div>
</div>

А вот собственно картинка, что требуется сделать:

введите сюда описание изображения

Я попытался решить эту задачу, и кажется, мне это (возможно?) удалось. Ниже добавлю свой ответ. Но буду благодарен, если посоветуете мне какие-нибудь более удачные решения (не ссылками на чужие решения, а своими готовыми ответами), и ваш ответ обязательно будет оценен, а самый правильный по мнению участников - принят.

P.S. Спасибо @MaximLensky и Alexandr_TT за участие! @MaximLensky был самым активным участником и добавил несколько различных ответов. Ответ принят @MaximLensky тот, в котором он показал решение, которому научил его Alexandr_TT.

1

7 ответов 7

4

Как я уже говорил в комментарии это делается маской в svg

Использовал вот это изображение: изображение

<svg viewBox="0 60 210 297" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <mask id="mask882" maskUnits="userSpaceOnUse">
   <path d="m11.339285 126.15475-0.14101-31.505765 27.214284-15.874999 27.355295 15.630762 0.141011 31.505762-27.214285 15.875z" fill="#fff" style="paint-order:fill markers stroke"/>
   <path d="m66.049876 157.41627-0.141011-31.50576 27.214285-15.875 27.35529 15.63077 0.14102 31.50576-27.214289 15.875z" fill="#fff" style="paint-order:fill markers stroke"/>
   <path d="m120.76046 188.67779-0.14101-31.50576 27.21429-15.875 27.35529 15.63077 0.14101 31.50576-27.21428 15.875z" fill="#fff" style="paint-order:fill markers stroke"/>
  </mask>
 </defs>
 <g mask="url(#mask882)">
  <image x="6.2366042" y="59.819946" width="199.9494" height="174.24702" image-rendering="optimizeQuality" preserveAspectRatio="none" xlink:href="https://cs2.livemaster.ru/storage/cd/2b/0695bd1f2905601799d08507e2wu--sumki-i-aksessuary-muzhskoj-portfel-jack-dzhek-cognac.jpg"/>
 </g>
</svg>

0
4

Решение у меня получилось следующее:

* {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: #f1f1f1;
  background: url('https://get.wallhere.com/photo/sea-waves-coast-foam-Surf-ocean-wave-Rapid-wind-wave-arctic-ocean-559106.jpg') center center;
  background-size: cover;
  background-attachment: fixed;
}

.hexagon {
  position: relative;
  left: 0;
  bottom: 0;
  margin-left: -1%;
  width: 90%;
  /*background: url('https://images.wallpaperscraft.ru/image/volny_more_priboj_pena_109857_1280x720.jpg') center center;
  background-size: cover;*/
  /*Если необходимо сделать задний фон неподвижным*/
}

.hexagon:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: -10000%;
  height: 10000%;
  width: 100%;
  background-color: #f1f1f1;
}

.hexagon__close {
  position: relative;
  width: 100%;
  min-height: 200vh;
  background-color: #f1f1f1;
}

svg {
  display: block;
  position: relative;
  float: none;
  width: 300px;
  width: 30%;
}

.two {
  margin-top: -70px;
  margin-left: 140px;
  margin-top: -7%;
  margin-left: 14%;
}

.he1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 430px;
  width: 43%;
}

.he2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 43%;
}

.wrp {
  position: absolute;
  top: 0;
  right: 0;
  left: 37%;
  min-height: 200vh;
  background-color: #f1f1f1;
}

.text {
  position: absolute;
  top: 0;
  right: 0;
  left: -30%;
}

h1 {
  text-align: center;
  color: dimgray;
  font-size: 4vw;
  font-family: sans-serif;
  font-weight: 100;
  text-transform: uppercase;
  padding: 50px 10% 25px 10%;
  ;
}

p {
  text-align: center;
  color: darkgray;
  font-size: 2vw;
  font-family: sans-serif;
  font-weight: 100;
  padding: 0 10% 25px 10%;
  ;
}

.button__l,
.button__r {
  position: relative;
  height: 30px;
  width: 50%;
  max-width: 200px;
  margin: 0 auto;
  margin-bottom: 25px;
  background: #f1f1f1;
  color: darkslategray;
  border: 2px solid dimgray;
  text-align: center;
  line-height: 30px;
}

.button__l:before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  border-top: 10px solid #f1f1f1;
  border-right: 10px solid #f1f1f1;
}

.button__r:before {
  content: '';
  position: absolute;
  right: -3px;
  top: -3px;
  border-top: 10px solid #f1f1f1;
  border-left: 10px solid #f1f1f1;
}

.button__l:after {
  content: '';
  position: absolute;
  left: -2px;
  top: 2px;
  width: 12px;
  height: 2px;
  transform: rotate(-45deg);
  border-top: 2px solid dimgray;
}

.button__r:after {
  content: '';
  position: absolute;
  right: -2px;
  top: 2px;
  width: 12px;
  height: 2px;
  transform: rotate(45deg);
  border-top: 2px solid dimgray;
}
<div class="hexagon">
  <svg class="one" viewbox="0 0 100 100" version="1.1" xmlns:svg="http://www.w3.org/2000/svg">
  <polygon fill="#fff"
           fill-opacity="0"
           stroke="#f1f1f1"
           stroke-width="5"
           points="50 1 95 25 95 75 50 99 5 75 5 25"/>
</svg>
  <svg class="two" viewbox="0 0 100 100" version="1.1" xmlns:svg="http://www.w3.org/2000/svg">
  <polygon fill="#fff"
           fill-opacity="0"
           stroke="#f1f1f1"
           stroke-width="5"
           points="50 1 95 25 95 75 50 99 5 75 5 25"/>
</svg>
  <svg class="he1" viewbox="0 0 100 100" version="1.1" xmlns:svg="http://www.w3.org/2000/svg">
  <polygon fill="#f1f1f1"
           fill-opacity="1"
           stroke="#f1f1f1"
           stroke-width="3"
           points="0 0 100 0 100 70 68 52 68 17 35 0 0 19"/>
</svg>
  <svg class="he2" viewbox="0 0 100 100" version="1.1" xmlns:svg="http://www.w3.org/2000/svg">
  <polygon fill="#f1f1f1"
           fill-opacity="1"
           stroke="#f1f1f1"
           stroke-width="3"
           points="0 29 35 47 35 83 68 100 100 85 100 100 0 100"/>
</svg>
</div>
<div class="hexagon__close"></div>
<div class="wrp">
  <div class="text">
    <h1>Прозрачные блоки</h1>
    <p>Два прозрачных шестиугольника, сквозь которые виден общий фон на заднем плане</p>
    <div class="button__l">Кнопка</div>
    <div class="button__r">Кнопка</div>
  </div>
</div>

Но это решение с простыми фигурами двух шестиугольников. А если это будут более сложные фигуры, например, имея округлую форму? Скажем, это будет не два шестиугольника, а конус и овал. Тогда как быть?

0
4

Если необходимо воспроизвести, что-то сложнее, чем геометрические фигуры, то конечно нужно использовать векторный редактор и SVG.

Загружаем эскиз в векторный редактор и инструментом : Рисовать кривые Безье наносим узловые точки.

введите сюда описание изображения

Сохраняем файл в векторном редакторе и забираем необходимые path шестиугольников и волны.

Для получения эффекта вырезания используем SVG маску.

Дополнительная информация в комментариях к коду

<style>
 .container {
background-color: #f9f9f9;
  }
</style>
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100vw" height="100vh" viewBox="0 0 1280 720">

    <defs>
 <mask id="msk1">  
     <!-- Шестиугольник маски -->
  <g transform="translate(-188)" fill="white">
    <path fill="white" d="m197.6 114c51.1-29.8 102.3-59.6 153.4-89.4 50.8 30.2 101.5 60.3 152.3 90.5 0.7 57.8 1.5 115.5 2.2 173.3-49.7 29.4-99.3 58.9-149 88.3-53-29.4-106-58.9-158.9-88.3 0-58.1 0-116.3 0-174.4zM362 386" />
  </g>
        <!-- Подбирая цвет заполнения path  можно изменять непрозрачность этого участка маски -->
  <path fill="red" d="M197.6 413.1 553 309.9c0 0 77.4-7.8 116-12.7 26-3.3 52.5-18.2 77.8-11.3 26.2 7.1 42.7 33.6 63.6 50.9 10 8.3 17.9 19.9 29.7 25.5 4.8 2.3 10.4 3.9 15.6 2.8 7.3-1.6 13.9-6.8 18.4-12.7 5.2-6.8 1.1-19.8 8.5-24 4.6-2.6 10.9 0.4 15.6 2.8 5.3 2.8 7.7 9.5 12.7 12.7 3.4 2.2 7.3 4.8 11.3 4.2 6.4-0.9 11.1-6.7 15.6-11.3 7.1-7.4 11-17.2 17-25.5 3.1-4.4 4.6-11.6 9.9-12.7 8.9-1.9 17.7 6.2 24 12.7 6.6 6.8 7.4 17.6 12.7 25.5 3.6 5.2 6.4 14 12.7 14.1 8 0.2 11.8-10.8 17-17 3.7-4.4 4.7-11.8 9.9-14.1 8.2-3.7 18.5-0.5 26.9 2.8 18.1 7.2 27.9 30.2 46.7 35.4 20.6 5.7 42.7-11.1 63.6-7.1 20.5 4 34.5 32.4 55.2 29.7 10.9-1.4 13.1-21.9 24-22.6 8.7-0.6 21.2 15.2 21.2 15.2V716.7L0 720 2.8 441.4Z" /> 
    <!-- Шестиугольник маски -->
  <g transform="translate(-188)" fill="white">
  <path  d="m362 386c49.7-29.7 99.3-59.3 149-89 51 29 102 58 153 87 0.3 57.7 0.7 115.3 1 173-50.7 29.3-101.3 58.7-152 88-51.3-28-102.7-56-154-84 1-58.3 2-116.7 3-175z" />
  </g>
  </mask>
  </defs>
     
    <image xlink:href="https://i.stack.imgur.com/aR1x4.jpg" mask="url(#msk1)" height="100%" width="100%"/>
	      <!-- Блоки с уголком -->
<path d="m718 203 10-10h202v32.5l-212.5-1z" fill="none" stroke="black"/>
  <path d="m717.5 243h204l8.5 10.5V276H717.5Z" fill="none" stroke="black"/>	 
    <g fill="#6B6B6B">
    <text x="770" y="215" font-size="24px"  > Кнопка 1 </text> 
	<text x="770" y="265" font-size="24px" > Кнопка 1 </text> 
	<text x="500" y="50" font-size="48px" > Прозрачные блоки </text>
	</g>
</svg>
</div>

1
3

В этом примере я расставил произвольно всякие фигуры и установил их в маску и так же для image применил эту маску

<svg width="500" height="250">
  <defs>
    <mask id="mask">
       <g>
        <path d="M100,0 150,50 100,50z" fill="white"></path>
        <circle cx="200" cy="120" r="80" fill="white"/>
        <rect x="300" y="40" width="100" height="100" fill="white"/>
      </g>     
    </mask>
  </defs>
  <image xlink:href="https://i.stack.imgur.com/x1yqP.jpg"
         x="0" y="0" preserveAspectRatio="none" mask="url(#mask)"/>

</svg>

2

Вот так вырезают дыры

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: url(https://i.stack.imgur.com/x1yqP.jpg);
  background-size: 100% 100%;
  background-attachment: fixed;
}
<svg width="100%" height="150%" viewBox="0 0 1000 1000">
  <path d="M0,0 1000,0 1000,1000 0,1000 
           M600,500 600,100 100,100 
           M600,600 500,600 400,400 300,600" fill="red" />
  <path d="" fill="blue"></path>
</svg>

0
1

В общем здесь важно направление рисования, к примеру самый верхний слой на котором вырезаем бреш рисуется с лева на право а дыры рисуются с права на лево.

Этому научил меня Alexandr_TT

html,
body {
  height: 100%;
}

body {
  background: url(https://avatars.mds.yandex.net/get-pdb/1386879/03fb902f-440e-40ac-ac1b-967d07d274c3/s1200);
  background-size: 100% 100%;
  background-attachment: fixed;
}

.pattern {
  width: 100%;
  height: 500px;
}
<div class="pattern">
  <svg viewBox="0 0 1100 1200">
    <defs>
      <mask id="mask">
     <path d="M0,1200 1150,1200 1150,0 0,0  0,1200
             M400,100 700,200 700,500 400,600 100,500 100,200
             M450,650 750,500 1050,650 1050,950 750,1100 450,950" fill="#fff"/>     
      </mask>
    </defs>
    <image preserveAspectRatio="none" x="0" y="0"
           xlink:href="https://st2.depositphotos.com/6396642/10238/v/950/depositphotos_102384760-stock-illustration-abstract-wavy-background-black-lines.jpg"          
           width="100%" 
           height="100%" 
           mask="url(#mask)" />
  </svg>
</div>

1

Последний вариант - можно сказать пиксель перфект ...смотрим, если вдруг возникают вопросы спрашивайте отвечу

Там есть куча тега br для имитации большого контента ...

смотреть на весь экран

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: url(https://avatars.mds.yandex.net/get-pdb/1386879/03fb902f-440e-40ac-ac1b-967d07d274c3/s1200);
  background-size: cover;
  background-attachment: fixed;
}

.pattern {
  width: 100%;
}

.heading {
  font-size: 30px;
  text-transform: uppercase;
  font-family: sans-serif;
  fill: #999;
}

.title {
  font-size: 16px;
}

.btn {
  font-family: sans-serif;
  font-size: 24px;
}
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<svg viewBox="0 0 1000 500" preserveAspectRatio='none'>
 <defs>
   <mask id="mask">
    <path d="M0,600 1000,600 1000,0 0,0
             M150,50 250,100 250,200 150,250 50,200 50,100
             M300, 200 400,250 400,350 300,400 200,350 200,250" fill="#fff"/>
   </mask>
  </defs>
  <image xlink:href="https://www.publicdomainpictures.net/pictures/40000/velka/tiny-white-dots-on-yellow.jpg" 
         x="0" y="0" 
         preserveAspectRatio="none"
         mask="url(#mask)"/>
  <g>
   <text x="450" y="60" class="heading"> secundary heading</text>
   <text class="title">
    <tspan x="380" y="90">Lorem ipsum, dolor sit amet consecteturadipisicing elit. Incidunt adipisci </tspan>        
    <tspan x="380" y="110">recusandae ea nesciunt ratione Laboriosam numquam, deserunt,quisquam<tspan>
    <tspan x="480" y="130">commodi consequatur fuga minima provident</tspan>    
  </text>
   
      <a target="_blank" xlink:href="http://yandex.kz">
       <text x="530" y="197" class="btn">learn more</text>
       <path d="M500,150 700,150 700,225 450,225 450,190z" fill="transparent" stroke=" #999" stroke-width="2"/>
      </a>
      <a target="_blank" xlink:href="http://google.kz">
        <text x="500" y="322" class="btn">request invite</text>
      <path d="M450,275 700,275 700,325 650,350 450,350z" fill="transparent" stroke=" #999" stroke-width="2"/>
      </a>

  </g>
</svg>


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.