Меня интересует как сделать наложение на фон слоя определенного цвета с прозрачной частью как в этом макете. Может кто знает хорошие способы как это реализовать, поэтому попрошу помочь сделать похожий фон внахлест.
То, о чем я говорю, есть в шапке сайта. Ссылка на макет: https://www.figma.com/file/VCBhj0WljD20IzHilnjMSJ/PrivateJetBooking?node-id=0%3A1
Уточню, цветной фильтр накладывается на фон, однако определенная область остается без этого фильтра, как это сделать?
Как насчет использования display:grid
, это помогло мне с наложением прозрачного изображения на фоновое.
да, я мог неправильно понять вопрос. хотя, если изображение, которое вы упомянули, показано в ссылке, почему бы не загрузить его специально с фигмы? Я не знаю, можете ли вы делать то, что хотите, в CSS.
Из того, что я вижу в файлах figma, вы можете скачать все изображения и использовать макеты в css для их форматирования по своему усмотрению. display:grid
может помочь вам в этом. в частности grid-row:1 /2
спецификация для всех дочерних элементов родительского элемента.
Как сейчас написано, ваш ответ неясен. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
Вы можете добиться этого, используя коробка-тень в качестве наложения белого цвета, и элемент станет вот таким иллюминатором:
.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>
Действительно хороший способ реализовать через тени, большое спасибо за вашу помощь
Мне удалось найти решение. Это не очень элегантно, но работает.
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 раза использовали фоновую картинку) Я тоже хотел так сделать, но человек выше подсказал лучший вариант
Простой способ сделать это. Вы можете попробовать с кодом ниже.
<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>
немного неправильно вас понял. Уточню, на фон накладывается цветовой фильтр, однако определенная область остается без этого фильтра, как это сделать?