在 CSS 中混合两种颜色作为背景

Question

我想将两种颜色叠加在一起。我通过创建和叠加两个 div 来做到这一点，其中一个位于顶部，不透明度为 60%。我想知道是否有更简单的方法只需要一种 div 两种颜色，或者只需要一种混合两种颜色的颜色。

我 post 这是我的代码，如果您发现任何不好的做法，请告诉我。我渴望提高自己的技能。

* {
  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>

如您所见，银色月亮上有一个金色月亮。我怎样才能得到只有一个月亮的相同结果？

Answer 1

您可以使用伪元素和多个背景对 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;
}

Answer 2

您可以尝试使用在线混色工具（例如这个 https://colordesigner.io/color-mixer）先获取混色的十六进制代码。之后，您可以在 div.

中使用结果颜色

Answer 3

另一种只涉及设置一个 background 属性的选项是“拉伸和置换”linear-gradient，结果是单一颜色。

--base-col 和 --blend-col 定义渐变，--blend-amount 设置颜色混合，--stretch-factor 确定应用于渐变的拉伸程度：

* {
  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 {
  --blend-amount: 60%;
  --base-col: silver;
  --blend-col: goldenrod;
  --stretch-factor: 100;
  background: linear-gradient(
    var(--base-col)  calc((  0% - var(--blend-amount)) * var(--stretch-factor)), 
    var(--blend-col) calc((100% - var(--blend-amount)) * var(--stretch-factor))
  );
}

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


/* ~~~~~~~~~~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>

在 CSS 中混合两种颜色作为背景

Mixing two colors for a background in CSS

html

css

background-image