【前端】背景缩放和渐变

素颜马尾好姑娘i 2023-10-09 10:37 26阅读 0赞

## 背景缩放 ##

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%);*/

转载于:https://www.cnblogs.com/Kighua/p/11575210.html