Поворотный текст поверх изображений с CSS

У меня возникают проблемы с получением текста для отображения по изображению. Всего четыре изображения, и они расположены в форме креста, а сверху сверху повернуты на 90 градусов от предыдущего изображения. Я пытаюсь сделать текст поверх изображения. Пока текст находится слева от экрана, а не над изображением.Поворотный текст поверх изображений с CSS

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

body { 
 
    background-color:black; 
 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
 
    margin: 0; 
 
} 
 

 
h2 { 
 
    color: white; 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 

 
.square { 
 
    /* background: black; */ 
 
    height: 100vh; 
 
    width: 100vh; 
 
    margin: auto; 
 
} 
 

 
.rotate180 { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 

 
.rotate90 { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 

 
.rotate270 { 
 
    -webkit-transform: rotate(270deg); 
 
    -moz-transform: rotate(270deg); 
 
    -ms-transform: rotate(270deg); 
 
    -o-transform: rotate(270deg); 
 
    transform: rotate(270deg); 
 
} 
 

 
.square div, 
 
.square img { 
 
    float: left; 
 
    width: 33.3333vh; 
 
    height: 33.3333vh; 
 
}

<div class="square"> 
 

 
    <div></div> 
 
    <img src="http://dummyimage.com/520&text=6.gif" alt="test" height="520" width="520"> 
 
    <h2>Test Text</h2> 
 
    <div></div> 
 
    <img src="http://dummyimage.com/520&text=3.gif" alt="test" height="520" width="520" class="rotate270"> 
 
     <h2>Test Text</h2> 
 
    <div></div> 
 
    <img src="http://dummyimage.com/520&text=4.gif" alt="test" height="520" width="520" class="rotate90"> 
 
     <h2>Test Text</h2> 
 
    <div></div> 
 
    <img src="http://dummyimage.com/520&text=8.gif" alt="test" height="520" width="520" class="rotate180"> 
 
     <h2>Test Text</h2> 
 
    <div></div> 
 

 
</div>

источник

2017-01-24 Vlad

завернуть изображения в дивах, установите те divs to position: relative, текст поверх изображений должен быть затем положение абсолютное. – Rooster

@ Rosster, пожалуйста, дайте мне пример? – Vlad

Вам нужно установить z-индекс текста (или элементов, содержащих текст) выше изображений. – APAD1

Я использовал индекс Z на изображение и текст, а затем добавили вращаться 0 градусов на верхней один для достижения этой цели. Я также поместил текст и изображение в один и тот же div и дал div div классу rotate. здесь скрипка https://fiddle.jshell.net/z8p1zk6c/

<html> 
<head> 
<style> 
body { 
    background-color:black; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    margin: 0; 
} 

h2 { 
    color: white; 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
    z-index: 10; 
} 
img { 
    z-index: 1; 
} 
.square { 
    /* background: black; */ 
    height: 100vh; 
    width: 100vh; 
    margin: auto; 
} 

.rotate0 { 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
} 

.rotate180 { 
    -webkit-transform: rotate(180deg); 
    -moz-transform: rotate(180deg); 
    -ms-transform: rotate(180deg); 
    -o-transform: rotate(180deg); 
    transform: rotate(180deg); 
} 

.rotate90 { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

.rotate270 { 
    -webkit-transform: rotate(270deg); 
    -moz-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    -o-transform: rotate(270deg); 
    transform: rotate(270deg); 
} 

.square div, 
.square img { 
    float: left; 
    width: 33.3333vh; 
    height: 33.3333vh; 
} 
</style> 
</head> 
<div class="square"> 

     <div></div> 
     <div class="rotate0"> 
     <img src="http://i.giphy.com/135mfnpV1Zt8uk.gif" alt="test" height="520" width="520"> 
     <h2>Test Text1</h2></div> 
     <div></div> 
     <div class="rotate270"> 
     <img src="http://i.giphy.com/135mfnpV1Zt8uk.gif" alt="test" height="520" width="520" class="rotate270"> 
      <h2>Test Text2</h2></div> 
     <div></div> 
     <div class="rotate90"> 
     <img src="http://i.giphy.com/135mfnpV1Zt8uk.gif" alt="test" height="520" width="520" class="rotate90"> 
      <h2>Test Text3</h2></div> 
     <div></div> 
     <div class="rotate180"> 
     <img src="http://i.giphy.com/135mfnpV1Zt8uk.gif" alt="test" height="520" width="520" class="rotate180"> 
      <h2>Test Text4</h2>  
      </div> 
     <div></div> 

    </div> 
</html>

источник

2017-01-24 21:59:21

все равно, чтобы определить или переместить туда, где текст накладывается поверх изображения? – Vlad

@ Vlad Здесь ya go https://fiddle.jshell.net/ev047kha/ использовать положение абсолютное и проверить это http://www.w3schools.com/cssref/pr_pos_top.asp –

Спасибо. Я попробую код сейчас. – Vlad

Вы должны поместить содержимое в обертке. Следующее должно сделать это, чтобы вы начали!

body { 
 
    background-color:black; 
 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
 
    margin: 0; 
 
} 
 

 
h2 { 
 
    color: white; 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
.wrapper{ 
 
    position: relative; 
 
} 
 
.square { 
 
    /* background: black; */ 
 
    height: 100vh; 
 
    width: 100vh; 
 
    margin: auto; 
 
} 
 

 
.rotate180 { 
 
    -webkit-transform: rotate(180deg); 
 
    -moz-transform: rotate(180deg); 
 
    -ms-transform: rotate(180deg); 
 
    -o-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 

 
.rotate90 { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 

 
.rotate270 { 
 
    -webkit-transform: rotate(270deg); 
 
    -moz-transform: rotate(270deg); 
 
    -ms-transform: rotate(270deg); 
 
    -o-transform: rotate(270deg); 
 
    transform: rotate(270deg); 
 
} 
 

 
.square div, 
 
.square img { 
 
    float: left; 
 
    width: 33.3333vh; 
 
    height: 33.3333vh; 
 
}

<div class="square"> 
 

 
    <div></div> 
 
    <div class="wrapper"> 
 
    <img src="http://dummyimage.com/520&text=6.gif" alt="test" height="520" width="520"> 
 
    <h2>Test Text</h2> 
 
    </div> 
 
    <div></div> 
 
    <div class="wrapper rotate270"> 
 
    <img src="http://dummyimage.com/520&text=3.gif" alt="test" height="520" width="520"> 
 
     <h2>Test Text</h2> 
 
    </div> 
 
    <div></div> 
 
    <div class="wrapper rotate90"> 
 
    <img src="http://dummyimage.com/520&text=4.gif" alt="test" height="520" width="520"> 
 
     <h2>Test Text</h2> 
 
    </div> 
 
    <div></div> 
 
    <div class="wrapper rotate180"> 
 
    <img src="http://dummyimage.com/520&text=8.gif" alt="test" height="520" width="520"> 
 
     <h2>Test Text</h2> 
 
    </div> 
 
    <div></div> 
 

 
</div>

источник

2017-01-24 22:01:49 Gacci

Пожалуйста, добавьте некоторое объяснение, почему этот код помогает OP. Это поможет обеспечить ответ, о котором могут узнать будущие зрители. См. [Ответ] для получения дополнительной информации. –

Я не верю, что это нуждается в дальнейших объяснениях. Класс называется оболочкой, и я заявил, что ему нужна оболочка. Что бы вы хотели, чтобы я объяснил? – Gacci

Вы можете использовать гибкие, оберните каждый текст & изображений внутри фигуры тега и применять ротацию:

.square { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    height: 100vh; 
 
    width: 100vh; 
 
    margin: auto; 
 
    -webkit-box-pack: justify; 
 
    -ms-flex-pack: justify; 
 
    justify-content: space-between; 
 
} 
 
figure { 
 
    width: 33.3333vh; 
 
    height: 33.3333vh; 
 
    position: relative; 
 
    margin: 0; 
 
} 
 
figure:first-child, 
 
figure:last-child { 
 
    margin: 0 33.33vh; 
 
} 
 
figure img { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
h2 { 
 
    color: green; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
} 
 
.rotate180 { 
 
    -webkit-transform: rotate(180deg); 
 
    transform: rotate(180deg); 
 
} 
 
.rotate90 { 
 
    -webkit-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
} 
 
.rotate270 { 
 
    -webkit-transform: rotate(270deg); 
 
    transform: rotate(270deg); 
 
}

<div class="square"> 
 

 
    <figure> 
 
    <img src="http://dummyimage.com/520&text=6 " alt="test" height="520" width="520"> 
 
    <h2>Test Text</h2> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://dummyimage.com/520&text=3 " alt="test" height="520" width="520" class="rotate270"> 
 
    <h2>Test Text</h2> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://dummyimage.com/520&text=4" alt="test" height="520" width="520" class="rotate90"> 
 
    <h2>Test Text</h2> 
 
    </figure> 
 
    <figure> 
 
    <img src="http://dummyimage.com/520&text=8" alt="test" height="520" width="520" class="rotate180"> 
 
    <h2>Test Text</h2> 
 
    </figure> 
 

 
</div>

источник

2017-01-24 22:07:28

Поворотный текст поверх изображений с CSS

ответ

Смежные вопросы