Как сверстать такое?

118

01 апреля 2021, 12:30

Пыталась, но текст не продолжается на фоне, а остаётся на картинке.

.picture{ 
  background: url('http://bm.img.com.ua/nxs/img/prikol/images/large/3/9/315193.jpg'); 
  width: 50%; 
}

<div class="picture"> 
  <h1>Просто какой-нибудь текст 12345</h1> 
</div>

, но текст остаётся внутри картинки, а мне надо, чтобы он за неё выходил.

Answer 1

Вам нужно либо 2 блока div либо псевдо классы before, after

Пример с псевдо классом

div { 
  width: 200px; 
  height: 100px; 
  position: relative; 
  background: url(https://cdn.sstatic.net/Sites/ru/Img/sprites.svg?v=f508971f422f); 
  border: 1px solid black; 
} 
 
div:before { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100px; 
  bottom: 0; 
  background-image: url(data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAD/vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP8AAAAA/74A//++AP8AAAAAAAAAAAAAAAD/vgD//74A/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAD/vgD//74A//++AP//vgD//74A/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAD/vgD/AAAAAP++AP//vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAD/vgD//74A/wAAAAAAAAAAAAAAAAAAAAD/vgD//74A/wAAAAAAAAAA/74A/wAAAAAAAAAAAAAAAAAAAAAAAAAA/74A/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAAAAAAA/74A//++AP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/74A/wAAAAAAAAAAAAAAAP++AP8AAAAAAAAAAAAAAAAAAAAA/74A/wAAAAAAAAAAAAAAAAAAAAAAAAAA/74A//++AP8AAAAAAAAAAAAAAAD/vgD/AAAAAAAAAAAAAAAAAAAAAP++AP//vgD//74A/wAAAAAAAAAAAAAAAP++AP8AAAAAAAAAAAAAAAAAAAAA/74A/wAAAAAAAAAAAAAAAP++AP//vgD/AAAAAP++AP//vgD//74A//++AP//vgD/AAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAD/vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/74A/wAAAAD/vgD//74A//++AP//vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/vgD//74A//++AP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8AAP59AAD9OQAA+YMAAPPPAAD30wAA55sAAO/5AADP/QAA3vkAAN47AADcgwAAzf8AAEP/AAA//wAAH/8AAA==); 
}

<div> 
  Оберните текст в див и отпрозиционирйте если надо. Можно воспользовать и padding 
</div>

Пример с вложенным блоком

.a { 
  width: 200px; 
  height: 100px; 
  position: relative; 
  background: url(https://cdn.sstatic.net/Sites/ru/Img/sprites.svg?v=f508971f422f); 
  border: 1px solid black; 
} 
 
.a .b { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100px; 
  bottom: 0; 
  background-image: url(data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAD/vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP8AAAAA/74A//++AP8AAAAAAAAAAAAAAAD/vgD//74A/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAD/vgD//74A//++AP//vgD//74A/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAD/vgD/AAAAAP++AP//vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAD/vgD//74A/wAAAAAAAAAAAAAAAAAAAAD/vgD//74A/wAAAAAAAAAA/74A/wAAAAAAAAAAAAAAAAAAAAAAAAAA/74A/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAAAAAAA/74A//++AP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/74A/wAAAAAAAAAAAAAAAP++AP8AAAAAAAAAAAAAAAAAAAAA/74A/wAAAAAAAAAAAAAAAAAAAAAAAAAA/74A//++AP8AAAAAAAAAAAAAAAD/vgD/AAAAAAAAAAAAAAAAAAAAAP++AP//vgD//74A/wAAAAAAAAAAAAAAAP++AP8AAAAAAAAAAAAAAAAAAAAA/74A/wAAAAAAAAAAAAAAAP++AP//vgD/AAAAAP++AP//vgD//74A//++AP//vgD/AAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAD/vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/74A/wAAAAD/vgD//74A//++AP//vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP++AP//vgD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/vgD//74A//++AP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//8AAP59AAD9OQAA+YMAAPPPAAD30wAA55sAAO/5AADP/QAA3vkAAN47AADcgwAAzf8AAEP/AAA//wAAH/8AAA==); 
}

<div class="a"> 
  <div class="b"> 
  </div> 
 
  Оберните в div и отпозиционируйте, если надо 
</div>

Если нужна прозрачность, делайте PNG с прозрачным фоном

Answer 2

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

Вы можете использовать CSS свойство mask, но у него поддержка слабовата.

Answer 3

С помощью свойства mask-image

.text-container { 
      border: 1px solid purple; 
      position: relative; 
width: 600px; 
height: 200px; 
      margin-left: 50px; 
      margin-top: 50px; 
 } 
 
.image-container { 
height: 400px; 
  background-image: url('http://lorempixel.com/640/480/'); 
  background-repeat: no-repeat; 
  border: 1px solid blue; 
} 
 
#text { 
  z-index: 100;  
  border: 1px solid red; 
} 
 
#im2 { 
  height: 200px; 
  position: absolute; 
  left:0; 
  top: 0; 
  border: 3px solid green; 
  mask-image: gradient( 
    linear, left center, right center,  
    color-stop(0.00,  rgba(0,0,0,1)), 
    color-stop(1.00,  rgba(0,0,0,0))); 
  -webkit-mask-image: -webkit-gradient( 
    linear, left center, right center,  
    color-stop(0.00,  rgba(0,0,0,1)), 
    color-stop(1.00,  rgba(0,0,0,0))); 
     
}

<div class="image-container"> 
  <div class="text-container"> 
    <img id=im2 src="http://lorempixel.com/240/480/" > 
    <h1 id=text>Текст, более длинный текст. раз - два</h1> 
  </div> 
</div>