1

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

0

3 ответа 3

1

ещё вариантик

* {
  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>

1

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>

0

Фон выведи через 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
  • 1
    дополните ваши слова примером... 3 апр 2020 в 8:07

Ваш ответ

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

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