Простая контейнерная структура

Исходя из мобильного программирования, я привык создавать родительский скрытый вид и размещать внутри него подвиды. Пытаюсь проделать то же самое с html/css/Bootstrap.

Скажем, я уже выложил какую-нибудь фоновую фотографию для обложки:

  <div class = "openBackContainer">
         <img  src = "images/Back.png" alt = "l" />
  </div>

Теперь я хотел бы создать квадратный скрытый контейнер в середине этой обложки, у которого есть заголовок и кнопка для загрузки фотографий:

Простая контейнерная структура

Как видите, я хочу добавить «виртуальный / скрытый» контейнер в середину обложки, а затем выровнять внутри заголовок и кнопку. (позже эта кнопка будет использовать класс начальной загрузки)

Что было бы хорошей практикой для создания этого контейнера внутри фотографии на обложке?

html css twitter-bootstrap

12.12.2018 07:50

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала используйте контейнер, занимающий 100% страницы, и установите его фоновое изображение для обложки. Затем вы можете использовать flex для центрирования вашего внутреннего div - по умолчанию он будет прозрачным.

body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
  background-image: url("https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.txt{
  color: white;
  font-size: 24px;
  margin-bottom: 20px;
}

.hidden button {
  background-color: red;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: 0;
}

<div class = "container">
  <div class = "hidden">
    <div class = "txt">Upload Photos</div>
    <button>+</button>
  </div>
  <div>

БЛАГОДАРНОСТЬ ! из любопытства, почему вы вставляете фотографию в CSS, а не в HTML? это хорошая практика?

— 12.12.2018 08:03

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

— 12.12.2018 08:05

пытаюсь загрузить свое собственное обратное изображение, которое раньше работало, а не его, вместо этого делаю вашу ссылку: background-image: url ("images / Back.png");

— 12.12.2018 08:27

Вроде нормально, это должен быть тот же путь, что и путь img src. Убедитесь, что путь правильный

— 12.12.2018 09:16

12.12.2018 07:56