html怎么混合颜色,在CSS中为背景混合两种颜色

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

我在这里张贴我的代码，如果你注意到任何不好的做法请告诉我。我渴望提高我的技能。

null* {

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;

}

null

正如你所看到的，银色的月亮上有一个金色的月亮。只有一个月亮，我怎么能得到同样的结果呢？

html怎么混合颜色,在CSS中为背景混合两种颜色相关推荐

html中怎么给长方形填充颜色,PS怎么在一个矩形里填充两种颜色 ps给矩形填充两种颜色的教程...
PS怎么在一个矩形里填充两种颜色?看到别人设计的作品中,一个矩形被填充了两种不同颜色,这是如何操作的呢?ps小白们或许还不太清楚吧,今天,小编为大家带来了ps给矩形填充两种颜色的教程.感兴趣的朋友快来 ...
CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...
c语言中怎么对圆环填充颜色,ps里怎么把圆环填充两种颜色
1.PS中怎么给圆形填充颜色给选区域图层填充颜色选择一种前景色或背景色. 选择要填充的区域.要填充整个图层,请在"图层"面板中选择该图层. 选取"编辑"&a ...
css背景分割两种颜色
background: linear-gradient(top,transparent 0,transparent 5%,rgb(138,173,255) 5%,rgb(138,173,255) 10 ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性关于背景涉及到背景颜色与背景图片背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
店铺首页图片css,店铺装修-CSS中的背景样式
本篇教程学习的是店铺装修-CSS中的背景样式,喜欢的一起来学习吧. 那我们开始今天的教程吧. 1.在[窗口]-[CSS设计器]添加[在页面中定义],添加一个新的类,[布局]里面有两个重要的东西,一个是 ...
CSS中的背景小知识
1.css中的背景有很多属性,在写的时候可以用background:xxx xxx 写在一起:也可以分开写,如background-color:background-image等等 2.背景颜色的写 ...
html5 css透明效果,css中实现背景透明的三种方式
css中实现背景透明通常有如下3种方式,以下是这三种方式的不透明度为80%的写法: css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8 css3的rgba(red, g ...

html怎么混合颜色,在CSS中为背景混合两种颜色

html怎么混合颜色,在CSS中为背景混合两种颜色相关推荐

最新文章

热门文章