CSS 同时使用背景色和背景图

1、可以同时使用背景色和背景图，具体方法首先用hbuilder新建一个html文件，创建一个div，并给div一个class属性，在上方的style中设置class的样式，这里把div的宽度和高度设置大点，方便观察效果：

2、然后使用background设置属性；background是一个复合属性，有五个参数，第一个是背景颜色，第二个是图片，第三个是图片重复的设置，第四个是背景图像是否固定或者随着页面的其余部分滚动，第五个个背景图像的起始位置：

3、最后打开浏览器，就能看到图片了，图片覆盖不了的部分则是使用背景色填充：

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>

效果：

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的背景颜色就为无色了。

---