optre
一位前端开发者,keep going!

一、背景基础属性

1 背景颜色

   background-color

2 背景图片设置

  background-image:url(背景图片的路径及全称);

3 背景图片平铺属性

  background-repeat: no-repeat / repeat / repeat-x / repeat-y

4 背景图的固定

  background-attachment 属性值scroll(滚动)、fixed(固定)

5 背景图片的位置

  background-position

  一个值   代表水平位置和垂直位置,center或数值

  两个值 水平位置(左右)、垂直位置(上下)

6 背景缩写

   background:#f00 url(背景图片的路径及全称) no-repeat center top;

二、背景进阶属性

1 background-origin背景原点

border-box    背景图像边框的相对位置
content-box    背景图像从内容的位置开始显示
padding-box(默认值) 从padding的区域开始显示

2 background-clip 背景裁切

border-box(默认值)
padding-box 裁剪padding之外的背景图
content-box 裁剪content之外的背景图

3 background-size 背景尺寸

一个值     100px    宽度100px,高度按照自身比例缩放
两个值     100px 100px;    宽高
一个值     100%    宽度是元素的100%,高度按照自己的比例进行缩放
两个值     100% 60%;    宽高占父元素边框百分比
属性值     cover    以最短的那条边为基准(拉伸)铺满元素
          contain 比较长的边为准,较长的边的长度拉伸为元素的宽或高

4 CSS3多背景属性(background)

background:url(demo.png) no-repeat;/* 写给不识别下面这句的默认背景图片 */
background:url(demo.png) no-repeat,url(demo1.png) left bottom;
background-color:yellow;/* 这是定义的默认背景颜色,全部合适 

注意:多背景以逗号分隔开,且前面的背景会覆盖后面的背景

 

posted on 2019-08-26 19:16  optre  阅读(156)  评论(0编辑  收藏  举报