Как синхронизировать наложенное изображение с основной формой круга?

Я пытаюсь воспроизвести вид солнечного затмения. У меня есть стартовый экран, на котором отображается <div> с радиусом границы 50% и шириной/высотой 20vw. Это, конечно, дает округлый вид, и с помощью некоторой тени я в значительной степени добиваюсь этого.

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

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

Я чувствую, что должен быть лучший способ.

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

наложенное изображение (если предыдущая ссылка не работает): https://imgur.com/a/jYMDkaR

.startup-screen {
    position: absolute; 
    z-index: 99;

    display: flex; 
    overflow: hidden;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    width: 100vw;
    height: 100vh;
    background: black;
}


.startup-screen__eclipse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 40%;
    padding: 5%;

    box-shadow: 17px 17px 18px rgba(255, 255, 255, 1),
                5px 5px 5px rgb(255, 213, 0),
                6px 6px 6px rgb(66, 230, 255),
                50px 50px 100px rgb(230, 207, 255);

    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}


.startup-screen__eclipse__overlay {
    position: absolute;
    width: fit-content;
    height: fit-content;
    border: 2px solid red;
    top: 13%;
    left: 33%;
    /* mix-blend-mode: color-dodge; */
}

.startup-screen__eclipse__overlay img {
    width: 35vw;
    height: 35vw;
    mix-blend-mode: hard-light;
}

<div class = "startup-screen" id = "startupScreen">
  <div class = "startup-screen__eclipse">
      <div class = "startup-screen__eclipse__overlay">
          <img src = "https://i.sstatic.net/6OwwlZBM.png"> 
      </div>
  </div>
</div>

Вы пытаетесь воспроизвести изображение только с помощью CSS?

— 23.08.2024 09:57

Изображение не отображается. Чтобы сопоставить изображение с фоном, нам нужно проверить, что это за изображение. и у изображения есть position: absolute;, но у родителя нет position: relative

— 23.08.2024 10:49

@NINE Я добавил резервную копию в пост, а также сюда: ссылка

— 23.08.2024 14:23

@prettyinpink определенно пытаюсь, я не против использования JavaScript, но я думаю, этого можно достичь только с помощью CSS... верно?

— 23.08.2024 14:23

@NINE извините, я только что понял, что вы имели в виду, что изображение не отображается во фрагменте кода, я исправил это. подскажите пожалуйста, что я могу сделать :(

— 23.08.2024 14:27

css flexbox

23.08.2024 08:27

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 2

Фон и красная рамка одинаковы

Чтобы получить правильные значения, я использовал вертикальные и горизонтальные соотношения в единицах VW.

Точнее, возможно, было бы лучше установить желаемый процент с помощью JS.

Остальное вы можете настроить сами, верно?

.startup-screen {
  position: absolute;
  z-index: 99;
  display: flex;
  overflow: hidden;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: black;
}

.startup-screen__eclipse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20vw;
  height: 20vw;
  padding: 5%;
  box-shadow: 17px 17px 18px rgba(255, 255, 255, 1), 5px 5px 5px rgb(255, 213, 0), 6px 6px 6px rgb(66, 230, 255), 50px 50px 100px rgb(230, 207, 255);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  position: relative;
}

.startup-screen__eclipse__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid red;
  /* mix-blend-mode: color-dodge; */
}

.startup-screen__eclipse__overlay img {
  width: 100%;
  height: 100%;
  mix-blend-mode: hard-light;
}

<div class = "startup-screen" id = "startupScreen">
  <div class = "startup-screen__eclipse">
    <div class = "startup-screen__eclipse__overlay">
      <img src = "https://i.sstatic.net/6OwwlZBM.png">
    </div>
  </div>
</div>

Конечно, со временем я это пойму, спасибо за ответ.

— 23.08.2024 15:56

23.08.2024 15:08

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

Структура HTML очень важна, и то, как она у вас есть сейчас, немного усложняет выполнение того, что вы хотите. Я бы структурировал свой HTML примерно так, как показано в следующем примере.

html,
body {
  margin: 0;
  padding: 0;
}

.startup-screen {
  display: flex;
  justify-content: center;
  align-items: start;
  width: 100vw;
  min-height: 100vh;
  background: black;
}

.startup-screen__eclipse-wrapper {
  position: relative;
  border: 2px solid red;
  width: 40%;
  aspect-ratio: 1;
}

.startup-screen__eclipse-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: hard-light;
}

.startup-screen__eclipse-overlay {
  position: absolute;
  top: 47%;
  left: 47%;
  width: 52%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  box-shadow: 17px 17px 18px rgba(255, 255, 255, 1), 5px 5px 5px rgb(255, 213, 0), 6px 6px 6px rgb(66, 230, 255), 50px 50px 100px rgb(230, 207, 255);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

<div class = "startup-screen" id = "startupScreen">
  <div class = "startup-screen__eclipse-wrapper">
    <img src = "https://i.sstatic.net/6OwwlZBM.png" class = "startup-screen__eclipse-image">
    <div class = "startup-screen__eclipse-overlay"></div>
  </div>
</div>

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

Вы просто находка, спасибо - есть ли способ разместить изображение (.startup-screen__eclipse-image) сзади с этой текущей настройкой?

— 23.08.2024 15:55

В настоящее время изображение отображается за наложением, но вы можете поменять порядок элементов, чтобы изменить это.

— 23.08.2024 16:03

Ты мне очень помог,дай Бог здоровья

— 23.08.2024 17:35

23.08.2024 15:13