Как создать белое поле для содержимого поверх фона изображения в HTML / CSS? - PullRequest
Новая
       4

Как создать белое поле для содержимого поверх фона изображения в HTML / CSS?

0 голосов
/ 01 мая 2020

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

.white-box {
    position: absolute;
    background-color: #FFFFFF;
    color: black;
    width: 50px;
    height: 50px;
    padding: 20px;
}

и это на странице HTML: 

<body>
<div class="white-box">
Content
</div>
</body>

Это не меняет мою веб-страницу и при поиске этой проблемы онлайн я просто вижу разные версии того, что я уже пробовал (показано выше) Вот то, чего я пытаюсь достичь

Я ценю любую помощь! :)

Ответы [ 2 ]

0 голосов
/ 01 мая 2020

Проверьте этот код. Вам не нужно использовать position: absolute, если изображение помещено в родительский элемент (в моем примере div.image является родительским для div.content). 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.image {
  min-height: 100vh;
  background-image: url(https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 30px;
}

.content {
  background: white;
  padding: 15px;
  border-radius: 3px;
}
<div class="image">
  <div class="content">
    <h1>What is Lorem Ipsum?</h1>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

Если вы хотите отобразить изображение на теле документа, вы можете добавить image класс к <body> вместо создания контейнера div.

0 голосов
/ 01 мая 2020

Попробуйте проверить сайт и css его использовать. Это даст вам лучшее представление и улучшит ваши навыки ((*

). Мой подход - установить фоновое изображение на внешнем элементе div и установить переполнение для прокрутки, а затем создать элемент div с белым фоном, как показано на рисунке. сайт

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...