#css #less #styling
#css #Меньше #оформление
Вопрос:
У меня есть следующее изображение следующим образом,
Как я могу написать текст на изображении выше и добиться следующего результата?
Комментарии:
1. вы что-нибудь пробовали? вы можете использовать абсолютную позицию для текста или использовать изображение в качестве фона.
2. текст находится позади моего изображения, потому что мое изображение также позиционирует абсолютное.
3. не могли бы вы поделиться каким-нибудь кодом, пожалуйста? вам придется поиграть с z-индексом
Ответ №1:
Попробуйте это, я надеюсь, это вам поможет. Спасибо
.wrapper {
position: relative;
}
.wrapper img {
width: 100%;
}
.wrapper label {
color: #fff;
font-size: 24px;
position: absolute;
}
.wrapper #id1 {
left: 20px;
top: 20px;
}
.wrapper #id2 {
right: 20px;
top: 20px;
}
.wrapper #id3 {
left: 20px;
bottom: 20px;
}
.wrapper #id4 {
right: 20px;
bottom: 20px;
}
.wrapper #id5 {
right: 20px;
top: 50%;
transform: rotate(90deg)
}
.wrapper #id6 {
left: 20px;
top: 50%;
transform: rotate(-90deg)
} <div class="wrapper">
<label id="id1">Text Left!</label>
<label id="id2">Text Right!</label>
<label id="id3">Text Bottom Left!</label>
<label id="id4">Text Bottom Right!</label>
<label id="id5">Text Rotate Right!</label>
<label id="id6">Text Rotate Left!</label>
<img src="https://keyassets.timeincuk.net/inspirewp/live/wp-content/uploads/sites/12/2015/07/Depth-of-field-landscape.jpg" alt="" />
</div> Ответ №2:
Предполагая, что у вас есть HTML, подобный:
<div class="container">
<img />
<p>Foo</p>
</div>
что-то вроде этого сработало бы (очевидно, вам придется изменить значения):
.container {
position: relative;
img{ z-index: 1; // img styles here }
p { position: absolute; left: 0.5rem; top: 0.5rem; z-index: 3; transform: rotate(90deg) }
}
Шаг за шагом:
- Расположите текст абсолютно
- Поверните его на 90 градусов
- Установите Z-индекс выше, чем у изображения
- Расположите текст правильно на изображении
- Прибыль…