前端背景缩放和渐变

Posted 2022-11-26 kighua

背景缩放

Background-size

    background:     可放/*颜色 图片  平铺  位置  滚动*/;
    border: 1px solid red;
    /*background-size:  w  h 规定背景图像的尺寸;*/
    /*background-size: 100px  100px;*/
    /*background-size: 100px;  如果只有一个值  后面一个值默认为 auto  等比例缩放*/
    /*background-size: cover; 图片部分可能不完整，超出部分会被切掉 */
    /*background-size: contain;   div会包含图片*/

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。

兼容性问题很严重，我们这里之讲解线性渐变

语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
        /*background: -webkit-linear-gradient(top, red, green);*/
        /*background: -webkit-linear-gradient(left, red, green);*/
        /*background: -webkit-linear-gradient(left top, red, green);*/

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；
        /*background: -webkit-linear-gradient(top, red 0%, green 50%, blue 100%);*/