Как сделать наложение фона?

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

То, о чем я говорю, есть в шапке сайта. Ссылка на макет: https://www.figma.com/file/VCBhj0WljD20IzHilnjMSJ/PrivateJetBooking?node-id=0%3A1

Уточню, цветной фильтр накладывается на фон, однако определенная область остается без этого фильтра, как это сделать?

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
0
43
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Как насчет использования display:grid, это помогло мне с наложением прозрачного изображения на фоновое.

немного неправильно вас понял. Уточню, на фон накладывается цветовой фильтр, однако определенная область остается без этого фильтра, как это сделать?

Vitaliy 03.04.2022 20:19

да, я мог неправильно понять вопрос. хотя, если изображение, которое вы упомянули, показано в ссылке, почему бы не загрузить его специально с фигмы? Я не знаю, можете ли вы делать то, что хотите, в CSS.

Nicik 03.04.2022 20:26

Из того, что я вижу в файлах figma, вы можете скачать все изображения и использовать макеты в css для их форматирования по своему усмотрению. display:grid может помочь вам в этом. в частности grid-row:1 /2 спецификация для всех дочерних элементов родительского элемента.

Nicik 03.04.2022 20:29

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

Community 04.04.2022 02:07
Ответ принят как подходящий

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

.background {
  width: 100%;
  height: 300px;
  background-position: center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.hole {
  width: 120px;
  height: 200px;
  position: absolute;
  top: 50px;
  right: 100px;
  border: 10px solid white;
  border-radius: 80px;
  box-shadow: 0px 0px 0px 99999px rgb(255 255 255 / 80%);
}
<section class = "background" style = "background-image: url('https://images.pexels.com/photos/62623/wing-plane-flying-airplane-62623.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260')">
  <div class = "hole"></div>
</section>

Действительно хороший способ реализовать через тени, большое спасибо за вашу помощь

Vitaliy 03.04.2022 20:58

Мне удалось найти решение. Это не очень элегантно, но работает.

body, html {
  padding: 0;
  margin: 0;
}
:root {
  --window-width: 100px;
  --right: calc(var(--window-width) + 80px);
  --window-height: 160px;
  --section-height: 300px;
  --section-width: 100vw;
}
.container {
  width: var(--section-width);
  height: var(--section-height);
  position: relative;
}
.bg, .inner-bg {
  background-image: url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80");
  background-size: cover;
  background-position: center;
  width: var(--section-width);
  height: var(--section-height);
}
.inner-bg {
  position: absolute;
  transform: translate(calc(-1 * calc(var(--section-width) - var(--right))),calc(calc(var(--window-height) / 2) - calc(var(--section-height) / 2)));
  top: 0;
  left: 0;
}
.inner-overlay {
  /*background-color: rgba(0, 0, 255, 0.1);*/
  /*blue tint in window*/
  width: 100%;
  height: 100%;
}
.bg {
  
}
.overlay {
  background-color: rgba(255, 255, 255, 0.7);
  width: 100%;
  height: 100%;
}
.window {
  outline: 5px solid white;
  border-radius: 40px;
  width: var(--window-width);
  height: var(--window-height);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(var(--section-width) - var(--right));
  overflow: hidden;
}
<div class = "container">
  <div class = "bg">
    <div class = "overlay">
    </div>
  </div>
  <div class = "window">
    <div class = "inner-bg">
      <div class = "inner-overlay">
      </div>
    </div>
  </div>
</div>

Хм, тоже неплохой вариант, я смотрю вы 2 раза использовали фоновую картинку) Я тоже хотел так сделать, но человек выше подсказал лучший вариант

Vitaliy 03.04.2022 22:08

Простой способ сделать это. Вы можете попробовать с кодом ниже.

<style>

  .main-div {
  width: 100%;
  height: 350px;
  position: relative;
  background-image: url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05");
  background-position: center;
  background-size: cover;
}

.inner-div {
  width: 130px;
  height: 200px;
  position: absolute;
  top: 70px;
  right:100px;
  border: 10px solid white;
  border-radius: 80px;
  box-shadow: 0px 0px 0px 99999px rgb(255 255 255 / 75%);

}
</style>

<div class = "main-div">
    <div class = "inner-div"></div>
</div>

Другие вопросы по теме