2

Я хочу сложить два цвета один поверх другого. Я сделал это, создав и совмещая два блока, располагая один наверху с непрозрачностью 60%. Интересно, есть ли более простой способ, требующий только одного div с двумя цветами или, может быть, только одного цвета, который представляет собой смесь двух.

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

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}


/* ~~~~~~~~~~SKY~~~~~~~~~~ */

#sky {
  position: relative;
  z-index: -100;
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient( to top, midnightblue, black);
}


/* ~~~~~~~~~~MOON~~~~~~~~~~ */

.moon {
  position: absolute;
  top: 3%;
  right: 0%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

#dark-moon {
  background-color: silver;
}

#light-moon {
  background-color: goldenrod;
  background-image: radial-gradient(dimgrey 20%, transparent 16%), radial-gradient(dimgrey 15%, transparent 16%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
  opacity: 60%;
}


/* ~~~~~~~~~~SEA~~~~~~~~~~ */

#sea {
  position: absolute;
  bottom: 0%;
  width: 100vw;
  height: 25vh;
  background-color: #48B;
}
<div id="sky">
  <div id="dark-moon" class="moon"></div>
  <div id="light-moon" class="moon"></div>
</div>

<div id="sea"></div>

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

Свободный перевод вопроса Mixing two colors for a background in CSS от участника @Davide.

1

1 ответ 1

4

Вы можете сделать это с 0 элементами, используя псевдоэлемент и несколько фонов:

html {
  min-height: 100%;
  background: linear-gradient( to top, midnightblue, black);
}

html::before {
  content:"";   
  position: absolute;
  top: 3%;
  right: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
    linear-gradient(rgba(192,192,192,0.4) 0 0),
    radial-gradient(dimgrey 20%, transparent 16%), 
    radial-gradient(dimgrey 15%, transparent 16%) 30px 30px,
    goldenrod;
  background-size: 60px 60px;
}

html::after {
  content:"";
  position: absolute;
  bottom: 0;
  left:0;
  right:0;
  height: 25vh;
  background: #48B;
}

Еще одна интересная идея по большей оптимизации кода:

html {
  min-height: 100%;
  background: 
   linear-gradient(#48B 0 0) bottom/100% 25vh no-repeat fixed,
   linear-gradient(black,midnightblue);
}

html::before {
  content:"";   
  position: absolute;
  top: 3%;
  right: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
    linear-gradient(#48B 0 0) bottom/100% 25vh no-repeat fixed,
    linear-gradient(rgba(192,192,192,0.4) 0 0),
    radial-gradient(dimgrey 20%, transparent 16%) 0    0   /60px 60px, 
    radial-gradient(dimgrey 15%, transparent 16%) 30px 30px/60px 60px,
    goldenrod;
}

Свободный перевод ответа от участника @Temani Afif.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.