css 设置背景的颜色及形状

html-css09

css 设置背景的颜色及形状,第1张

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给标签设置背景图片是通过background属性实现的。当然用background-image更正式一些。

不管用上述那种方式书写值都是一样的,url("./image.png")。

括号里面的分号包裹的就是图片的路径。

当然,设置背景图的标签要有宽和高,不然背景图显示不出来。

在CSS中,可以使用background-color属性来设置背景颜色。background-color属性设置一个元素的背景颜色,该属性为元素设置一种纯色,这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界。