CSS 多背景和渐变

设置多个背景

<body>
    <section></section>
</body>
section {
    width: 429px;
    height: 265px;
    background: url(image2.gif) no-repeat, url(image1.png);
}

上面给 section 设置了多个背景(用逗号隔开),默认第一个背景图片在最上面(image2.gif),类似的我们可以添加多个背景。

边框

CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素, 这样在我们设置 100% 的窗口的时候就计算起来特别麻烦,后来引入了一个 border-box 来解决这个问题。

section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
}

section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
    box-sizing : border-box; 
}

box-sizing :content-box|border-box|inherit;

  • content-box : 上面的默认行为,就是会拉伸宽度和高度。
  • border-box : 根据实际宽高来将边框和padding约束到元素内部。
  • inherit : 从父元素继承 box-sizing 属性的值。

背景裁剪

无论上面我们设置 box-sizing 是什么,会发现都会有背景在边框之下的现象,这样就会导致背景的一部分被边框裁切掉。

设置一个 background-clip: padding-box; 会达到我们期望的结果,看看效果:

background-clip :border-box|padding-box|content-box;

  • border-box :背景被裁剪到边框盒(默认)。
  • padding-box :背景被裁剪到内边距框。
  • content-box :背景被裁剪到内容框。

背景尺寸

background-size 属性接受水平和垂直两个值,这些值可以使用像素或者百分比,然后再加上一个可选的关键字 cover 或 contain。

background-size : length|percentage|cover|contain;

  • length:设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 “auto”。
  • percentage:以父元素的百分比来设置背景图像的宽度和高度。
  • cover : 背景图等比缩放直到覆盖满整个元素。
  • contain :背景图等比缩放后完全包含在元素中。

    background-size: 300px;  //只制定宽度,高度等比缩放
    

background-size: 50% 50%;  //宽高均为容器的50%

background-size: cover;    //等比缩放到覆盖满整个图形

background-size: contain;  //比缩放后完全包含在元素中

线性渐变

background: linear-gradient(#fed46e, #ba5c61);

上面定义了一个简单的渐变,默认方向是从上到下,可以从8个方向中指定一个方向(left, right, top, bottom):

background: linear-gradient(to left top, #fed46e, #ba5c61);

当然,为了更加灵活的调节渐变方向,也可以指定渐变的角度:

background-image : linear-gradient(30deg, #fed46e, #ba5c61);

增加几个渐变颜色,并指定每个颜色的开始渐变的位置:

background-image : linear-gradient(#b1585d,#fed46e 20%,#388fa2 60%); 

实现一种颜色突变,只需要将两个相邻颜色设置为一样:

background-image : linear-gradient(#b1585d,#fed46e 40%,#388fa2 40%); 

径向渐变

上面我们使用的是 linear-gradient 实现的线性渐变,接下来我们使用 radial-gradient 实现径向渐变。

.flexbox .s0 {
    background-image : radial-gradient(#fed46e, #ba5c61);
}
.flexbox .s1 {
    background-image : radial-gradient(circle, #fed46e, #ba5c61);
}
.flexbox .s2 {
    background-image : radial-gradient(circle closest-side, #fed46e, #ba5c61);
}
.flexbox .s3 {
    background-image : radial-gradient(circle closest-corner, #fed46e, #ba5c61);
}
.flexbox .s4 {
    background-image : radial-gradient(circle farthest-corner, #fed46e, #ba5c61);
}
.flexbox .s5 {
    background-image : radial-gradient(circle farthest-side, #fed46e, #ba5c61);
}
  • closest-side 离圆心最近的边作为结束点。
  • farthest-side 离圆心最远的边作为结束点。
  • closest-corner 离圆心最近的一个角作为结束点。
  • farthest-corner 离圆心最远的一个角作为结束点。

接下来我们看几组移动圆心坐标的案例:

.flexbox .s0 {
    background-image : radial-gradient(circle at top left,#fed46e,#ba5c61);
}
.flexbox .s1 {
    background-image : radial-gradient(circle at top right, #fed46e, #ba5c61);
}
.flexbox .s2 {
    background-image : radial-gradient(circle at 40px 30px, #fed46e, #ba5c61);
}
.flexbox .s3 {
    background-image : radial-gradient(circle at 40px -30px, #fed46e, #ba5c61);
}
.flexbox .s4 {
    background-image : radial-gradient(circle , #b1585d 30%,#fed46e 30%,#fed46e 40%,#388fa2 40%);
}
.flexbox .s5 {
    background-image : radial-gradient(circle at top left, #b1585d 30%,#fed46e 30%,#fed46e 40%,#388fa2 40%);
}

重复渐变

重复渐变有 repeating-linear-gradientrepeating-radial-gradient 这两种类型。

.flexbox .s0 {
    background-image : repeating-linear-gradient(90deg,#fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px);
}
.flexbox .s1 {
    background-image : repeating-linear-gradient(45deg,#fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px);
}
.flexbox .s2 {
    background-image : repeating-linear-gradient(45deg , #fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px,#388fa2 6px, #388fa2 9px);
}
.flexbox .s3 {
    background-image : repeating-radial-gradient(circle , #fed46e,#ba5c61 6px); 
}
.flexbox .s4 {
    background-image : repeating-radial-gradient(circle at bottom, #fed46e,#ba5c61 6px); 
}
.flexbox .s5 {
    background-image : repeating-radial-gradient(circle,  #fed46e,#fed46e 3px,#ba5c61 3px,#ba5c61 6px,#388fa2 6px, #388fa2 9px);
}

为了方便你自行测试,我贴出其余样式和布局代码:

<body>
    <section class="flexbox">
    <div><div class="bgrg s0"></div><span>线性重复渐变</span></div>
    <div><div class="bgrg s1"></div><span>45度线性重复</span></div>
    <div><div class="bgrg s2"></div><span>三色线性重复</span></div>
    <div><div class="bgrg s3"></div><span>径向重复渐变</span></div>
    <div><div class="bgrg s4"></div><span>圆形偏移</span></div>
    <div><div class="bgrg s5"></div><span>三色径向渐变</span></div>
    </section>
</body>
.flexbox {
    display: flex;
    width: 600px;
    flex-wrap: wrap;
}

.flexbox div{
    text-align: center;
}

.flexbox .bgrg{
    width: 140px;
    height: 100px;
    margin: 20px;
    padding : 10px;
    border : 5px dashed rgb(0,0,0);
    box-sizing: border-box;
    background-clip:padding-box;
    text-align: center;
}

.flexbox span {
    color: #333;
    size: 10px;
}