背景与渐变

Frank
  • 前端基石
  • CSS3
  • 背景
  • 渐变
大约 3 分钟约 964 字...

背景

bgckground-color

  • 表示背景颜色
  • 可以用十六进制,rgb(),rgba()
  • padding 区域是有背景颜色的

background-image

用来设置背景图片,图片路径要写到 ur1()圆括号中,可以是相对路径,也可以是 http://开头的绝对路径

background-repeat

用来设置背景的重复模式

  • repeat:x,y 均平铺(默认)
  • repeat-x:x 平铺
  • repeat-y:y 平铺
  • no-repeat:不平铺

background-size

  • 属性用来设置背景图片的尺寸
background-size:100px 200px; 宽度 高度
  • 值也可以用百分数来设置,表示为盒子宽、高的百分之多少
  • 需要等比例设置的值,写 auto

contain 和 cover

  • contain 和 cover 是两个特殊的 background-size 的值

  • contain 表示将背景图片智能改变尺寸以容纳到盒子里

  • cover 表示将背景图片智能改变尺寸以撑满盒子

注意

contain和 cover

上面是 contain:很明显 cover 会裁剪图片

background-origin 不常用

background-origin 属性规定 background-position 属性相对于什么位置来定位

如果背景图像的 background-attachment 属性为 " fixed ",则该属性没有效果

padding-box(默认值)背景图像相对于内边距框来定位
border-box背景图像相对于边框盒来定位
content-box背景图像相对于内容框来定位

演示open in new window

background-clip 不常用

用来设置元素的背景裁切到哪个盒子

  • border-box:背景延伸至边框(默认值)
  • padding-box:背景延伸至内边( padding),不会绘制到边框处(仅在 dotted、 dashed 边框可察觉)
  • content-box:背景被裁剪至内容区

background-attachment 不常用

决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。

  • fixed:自己滚动条不动,外部滚动条不动
  • local:自己滚动条动,外部滚动条动
  • scroll:自己滚动条不动,外部滚动条动(默认值)

background-position

  • 可以设置背景图片出现在盒子的什么位置
background-position:100px 200px;
  • 可以用 top、 bottom、 center、left、right 描述图片出现的位置

CSS 精灵

  • CSS 精灵:将多个小图标合并制作到一张图片上,使用 background-position 属性单独显示其中一个,这样的技术叫做 CSS 精灵技术,也叫作 CSS 雪碧图
  • CSS 精灵可以減少 HTTP 请求数,加快网页显示速度。缺点也很明显:不方便测量、后期改动麻烦

background 综合属性

background: [background-color] [background-image] [background-repeat]
  [background-attachment] [background-position] / [ background-size]
  [background-origin] [background-clip];

注意

如果backgroundopen in new window-position 和 background-size 同时设置,需要在 background-size 前面加“/”,类似的简写语法在 font 和 border-radius 中也有

注意:如果简写形式中含有 background-size 属性,那么必须同时写上 background-position 属性,如果省略了就会导致样式失效

总结就是:size 和 position 属性在简写的情况下,要么都写,要么都不写。都写的时候 size 前面需要加/

background: #eef0f3 url('../assets/login_background.png') no-repeat bottom
  left/500px 400px;

渐变

线性渐变

  • 盒子的 background-image 属性可以用 linear-gradient()形式创建线性渐变背景
background-image: linear-gradient(to right, blue, red);

to 渐变方向 开始颜色 结束颜色

  • 渐变方向也可以写成度数 eg:45deg

  • 可以有多个颜色值,并且可以用百分数定义它们出现的位置

background-image: linear-gradient(to right, blue, yellow 20%, red);

径向渐变

盒子的 background- image 属性可以用 radial- gradient()形式创建径向渐变背景

background-image: radial-gradient(50% 50%, blue, red);

百分数代表圆心坐标

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1