欢迎光临
我的个人博客网站

css3新增属性-background背景


css3新增属性🔑

  • 边框属性
  • 背景属性
  • 文字属性
  • 颜色属性

 背景属性🔨

属性 说明

background-image

添加背景图片

background-size

指定背景图像的大小

background-origin

指定背景图像的位置区域

background-clip

指定位置开始裁剪背景图

 

 

 

 

 

 

 

 

1. background-image(背景图片)💡

 CSS3中可以通过background-image属性添加背景图片

语法:background-image:url(‘图片地址’)

注意:不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张

#example1 {     background-image: url(img_flwr.gif), url(paper.gif); /*背景图*/     background-position: right bottom, left top; /*背景图位置*/     background-repeat: no-repeat, repeat; /*背景是否平铺*/ }

另外,还可以给不同的图片设置多个不同的属性:

#example1 {    /*这时直接使用复合属性background*/     background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; }

2. background-size(背景大小)💡

background-size指定背景图像的大小

CSS3以前,背景图像大小由图像的实际大小决定

CSS3中可以在不同的环境中指定背景图片的大小,单位可以是像素比也可以是百分比大小

注意:你指定的大小是相对于父元素的宽度和高度的百分比的大小,不能为负值!

单张图片的背景大小可以使用以下三种方法中的一种来规定:

  • 使用关键词 contain:等比例缩放,直到有一条边碰到盒子边框就停止
  • 使用关键词 cover:等比例缩放,填充覆盖整个盒子
  • 设定宽度和高度值

当通过宽度和高度值来设定尺寸时,你可以提供一或者两个数值:

  • 如果仅有一个数值被给定,这个数值将作为宽度值大小,高度值将被设定为auto
  • 如果有两个数值被给定,第一个将作为宽度值大小,第二个作为高度值大小。

示例值:

div{     /* 关键字 */     background-size: cover     background-size: contain      /* 一个值: 这个值指定图片的宽度,图片的高度隐式的为auto */     background-size: 50%     background-size: 3em     background-size: 12px     background-size: auto      /* 两个值 */     /* 第一个值指定图片的宽度,第二个值指定图片的高度 */     background-size: 50% auto     background-size: 3em 25%     background-size: auto 6px     background-size: auto auto      /* 逗号分隔的多个值:设置多重背景 */     background-size: auto, auto     /* 不同于background-size: auto auto */     background-size: 50%, 25%, 25%     background-size: 6px, auto, contain      /* 全局属性 */     background-size: inherit;     background-size: initial;     background-size: unset; }

伸展背景图像完全填充内容区域:

div{     background:url(img_flwr.gif);     background-size:100% 100%; /*填充整个内容区域*/     background-repeat:no-repeat; }

背景图片大小计算:

(1)如果指定了 background-size 的两个值并且不是auto

  背景图片按指定大小渲染。

(2)contain 或 cover:

  保留固有比例,最大的包含或覆盖背景区。如果图像没有固有比例,则按背景区大小。

(3)auto 或 auto auto:

  图像如果有两个长度,则按这个尺寸。如果没有固有尺寸与固有比例,则按背景区的大小。如果没有固有尺寸但是有固有比例, 效果同 contain。如果有一个长度与比例,则由此长度与比例计算大小。如果有一个长度但是没有比例,则使用此长度与背景区相应的长度。

(4)一个为 auto 另一个不是auto:

  如果图像有固有比例,则指定的长度使用指定值,未指定的长度由指定值与固有比例计算。如果图像没有固有比例,则指定的长度使用指定值,未指定的长度使用图像相应的固有长度,若没有固有长度,则使用背景区相应的长度。

注意规范:

.bar {        width: 50px; height: 100px;        background-image: gradient(...);         /* 不推荐 */        background-size: 25px;        background-size: 50%;        background-size: auto 50px;        background-size: auto 50%;         /* 可行 */        background-size: 25px 50px;        background-size: 50% 50%; }

3.background-origin(背景起始位置)💡

background-origin 规定了指定背景图片background-image属性的原点位置的背景相对区域

注意:当使用 background-attachment为fixed时,该属性将被忽略不起作用

css3新增属性-background背景

语法:

background-origin : border-box | padding-box | content-box

  • padding-box :从padding区域开始显示(默认值)

  • content-box :从内容区域开始显示,不计算padding部分

  • border-box :从边框左上角区域开始显示
.example {    border: 10px double;    padding: 10px;    background: url('image.jpg');    background-position: center left;    /* 背景将在内容区padding内部填充 */    background-origin: content-box;    /* 背景将从边框左上角区域开始填充 */    background-origin: border-box; }

4.background-clip(背景裁剪)💡

background-clip  设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面

取值:

div{     /* Keyword values */     background-clip: border-box;     background-clip: padding-box;     background-clip: content-box;     background-clip: text;  /* Global values */     background-clip: inherit;     background-clip: initial;     background-clip: unset;   }

  • padding-box :裁剪到padding部分,显示内边距、内容区部分图片

  • content-box :裁剪到内容区,只保留内容区部分图片

  • border-box :裁剪到边框区,显示内容区、内边距和边框部分图片

background(复合属性)🔺

background 是一种css简写属性,用于一次性集中定义各种背景属性,,包括 color, image, origin 与 size, repeat 方式等等

语法缩写:

div{     background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...   }

可以把上面的缩写拆解成以下形式:

div{    background-image:url1,url2,...,urlN;    background-repeat : repeat1,repeat2,...,repeatN;    backround-position : position1,position2,...,positionN;    background-size : size1,size2,...,sizeN;    background-attachment :     attachment1,attachment2,...,attachmentN;    background-clip : clip1,clip2,...,clipN;    background-origin : origin1,origin2,...,originN;    background-color : color; }

注意🧨

  •  用逗号隔开每组 background 的缩写值;
  •  如果有 size 值,需要紧跟 position 并且用 “/” 隔开;
  •  如果有多个背景图片,而其他属性只有一个(例如 background-repeat 只有一个),表明所有背景图片应用该属性值。
  •  background-color 只能设置一个。

扩展常用背景图片格式!

  • .jpg 不支持动画,不支持透明,渐进显示,颜色丰富,有损

  • .png 不支持动画,支持透明度,颜色更丰富,无损

  • .gif 支持动画,256种颜色,2种透明度,渐进显示

  • .webp 支持动画,高压缩率,高加载速率

以上就是当前所整理的css3中新增的背景属性,若整理有误或不完善请各位大佬指出~

赞(0) 打赏
未经允许不得转载:张拓的天空 » css3新增属性-background背景
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏