CSS基础知识汇总{主要内容:多背景及背景尺寸}

一、多背景
多背景写法:
在这里插入图片描述
背景尺寸: 设置背景图片的大小
◆通过background-size设置背景图片的大小
◆background-size的取值:
✔可以设置具体值
✔可以设置一个值,另外一个默认代表auto
✔可以设置预定义的值 cover
将背景图片按照缩放比例,将整个父容器沾满

✔可以设置预定的值 contain
将背景图片按照缩放比例,将整个背景图片完整的显示到容器中。

在这里插入图片描述
二、线性渐变
组成:开始颜色、结束颜色、渐变的方向、渐变的范围。
渐变的方向:
(1)◆to+ left | right | top | bottom |
(2)◆使用角度表示渐变的方向。 0deg 代表从下向上渐变, 90deg 代表从左向右渐变。
在这里插入图片描述
渐变的范围:
(1)◆渐变的范围使用百分比表示
(2)◆默认渐变范围相对父元素宽度
(3) ◆如果设置了background-size,那么渐变的范围是相对background-size设置的值
具体使用如下:
在这里插入图片描述
注意: ◆在渐变中首先要规定渐变的方向
其他示例如下:
角度设置渐变的方向:
在这里插入图片描述
渐变范围:
在这里插入图片描述
三、径向渐变

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值