Верстаю макет сайта, в нем есть блок с меню в виде картинок и текстом внутри и квадратной обводкой вокруг текста. Не знаю как сделать так, чтобы этот текст вместе с обводкой был поверх картинок. Искал решение на других сайтах, но те примеры решения не совсем то, что нужно. Скриншот блока сайта прилагается.
Добавить комментарий
|
3 ответа
ещё вариантик
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.block {
position: relative;
width: 300px;
height: 300px;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.block::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.block__outer {
padding: 30px;
width: 100%;
height: 100%;
}
.block__inner {
border: 1px solid white;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
position: relative;
z-index: 1;
}
<div class="block" style="background-image: url('https://picsum.photos/1920/1080');">
<div class="block__outer">
<div class="block__inner">
<h2 class="block__title">Some text</h2>
</div>
</div>
</div>
div {
position: relative;
width: 200px;
height: 300px;
}
div:before { /*рамка внутри картики*/
content: "";
display: block;
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 1px solid black;
}
h3 {
position: absolute;
width: 100%;
text-align: center;
top: 35%;
}
h3:before { /*линия над текстом*/
content: "";
display: block;
position: absolute;
top: -10px;
left: 40%;
right: 40%;
border-top: 1px solid black;
}
h3:before { /*линия под текстом*/
content: "";
display: block;
position: absolute;
bottom: -10px;
left: 40%;
right: 40%;
border-bottom: 1px solid black;
}
<div><img src="https://matakov.com/wp-content/uploads/2015/12/2015-11-15_13-52-10-200x300.jpg">
<h3>Текст</h3>
</div>
Фон выведи через bg-image
обводку через border
обращайся в css через дочерние элементы
Получится примерно так
html
<div class=""item>
men
css
.
.item{
bg-img: ...;<br>
f-size: ...;<br>
border: 1px solid:#000;<br>
padding: 20px; 10px;
-
1