CSS3背景

CSS背景属性回顾

背景单个属性

  • background-image
  • background-color
  • background-repeat
  • background-position
  • background-attachment
    背景符合属性
  • background
    注意:复合属性会覆盖前面的单个属性,反之则不会

背景定位的扩展

在CSS3中,背景定位得到了扩展,它允许我们指定背景图片在距离任意角的偏移量,只需要在偏移量前面指定关键字

background-position:right 20px bottom 10px;使用时单独设置。也可以使用background-origin:content-box实现

CSS3新增背景属性

背景尺寸:background-size

  1. 设置背景尺寸 background-size
    background-size:x y; //水平 垂直;值可以为像素、百分比、auto等
    background-size:cover; //保持宽高比不变,保证占满盒子,但是不一定能看到全部图
    backgroundsize:contain; //保持宽高比不变,保证看清全图,但是不一定占满盒子

  2. 多背景 background-image
    background-image:url(1.jpg),url(2.jpg); 多个背景以逗号隔开,无限个数

  3. 背景起始区域 background-origin
    background-origin:border-box; //从border区域起始
    background-origin:padding-box; //默认值,从padding区域起始
    background-origin:content-box; //从内容部分起始

  4. 背景显示区域 background-clip //从什么地方看到图片
    background-clip:border-box; //默认值,从border区域开始显示背景
    background-clip:padding-box; //从padding区域开始显示背景
    background-clip:content-box; //从内部区域开始显示背景

新增颜色与背景渐变

新增背景色

  1. rgb:rgb为三原色,取值范围为0~255
  2. hslH:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 – 360,S:Saturation(饱和度)。取值为:0.0% - 100.0%,L:Lightness(亮度)。取值为:0.0% - 100.0%。 100%纯白色
  3. rgba,hsla:在上面的基础上多了一个a透明度数值,取值范围0~1,0为完全透明,1为完全不透明

渐变色

  1. 线性渐变:linear-gradient()
  2. 径向渐变:radial-gradient()

线性渐变很简单,这里说一下经向渐变。

1
2
3
4
//标准写法
radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)
//-webkit-老版本径向渐变的写法
-webkit-radial-gradient([<position>||<angle>,]? [<shape>||<size>,]>?<color-stop>[,<color-stop>]+)

  • 径向渐变方式主要由position、shape、size这三个参数影响,分别控制椭圆的圆心、形状和大小
  • position:定义渐变的圆心。默认是center(X轴),center(Y轴),可以是left,right,center关键词,也可以是具体的数值,还可以是百分比。最后可以是单个值,另一个就默认是center
  • shape:定义渐变的形状是圆(circle)或者是椭圆(ellipse 默认)
  • size:定义渐变的大小、默认是farthest-corner。有四个值。
    1
    2
    3
    4
    closest-side:半径为从圆心到最近边
    closest-corner:半径为从圆心到最近角
    farthest-side:半径为从圆心到最远边
    farthest-side:半径为从圆心到最远角

注意:在使用时需要加上 –webkit-兼容前缀 IE低版本兼容filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1').

文章作者: 踏浪
文章链接: https://www.lyt007.cn/技术/CSSS3背景.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 踏浪 - 前端技术分享
支付宝
微信打赏