css的背景颜色设置为无色步骤如下:
1、新建一个html文件,需要设置宽度250px和高度140px,以及背景色填充为红色。
2、然后在父级DIV中插入一个子DIV,定义它的宽200px,高90px,以及背景色。
3、然后添加一个无色(透明)的代码(opacity:0.6)。
4、在图层的上方,有个不透明度,设置为60%。
5、把刚才的背景色和无色代码删除,换个代码【background-color:rgba(255,255,255,0.6)】。
6、其中255,255,255就是PS中的拾色器里的数值。这样,css的背景颜色就为无色了。
CSS:
.grup{
padding-top: 104px
position: relative
border-radius: 15px
margin-bottom: 217px
}
.grup .img{
width: 370px
height: 87px
position: absolute
top:-48px
margin-left: calc(50% - 185px)
z-index:999
background: linear-gradient(
115deg, /*背景分割倾斜角度*/
#fff 0%,
#fff 40%,
#3596EB 40%,
#3596EB 100%
)
border: 4px solid #3596EB
border-radius: 44px
}
.grup .img .coun{
display: flex
justify-content: space-around
}
.grup .img .coun div{
display: flex
line-height: 88px
}
.grup .img .coun .left{
color:#3596EB
font-size: 32px
letter-spacing: 3px
font-weight: 500
}
.grup .img .coun .right{
color:#fff
font-size: 28px
letter-spacing: 3px
font-weight: 500
}
HTML:
<div class="up grup">
<div class="img">
<div class="coun">
<div class="left">新建</div>
<div class="right">所有文集</div>
</div>
</div>
</div>
效果: