background-size属性,backgroundsize属性用于控制背景图像的大小

css中background简写属性

在CSS2.1里，background属性的简写方式包含五种属性值，从CSS3开始，又增加了3个新的属性值，加起来一共8个。

CSS2.1

background-color使用的背景颜色。

background-image使用的背景图像。

background-repeat如何重复背景图像。

background-attachment背景图像是否固定或者随着页面的其余部分滚动。

background-position背景图像的位置。

CSS3

background-size背景图片的尺寸。默认值：'auto'? 其他值：像素，百分比，contain，cover

background-origin背景图片的定位区域。 默认值：'padding-box'? ? ? ? ?'border-box' 、'content-box'(定义背景图片绘制的开始点)

background-clip背景的绘制区域。 默认值：'border-box'? ? ? 还有'padding-box'、'content-box'(定义背景绘制的开始点)

简写方式：

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

不设置的属性可以省略

background-Origin属性指定background-position属性应该是相对位置。

注意

1、如果背景图像background-attachment是"固定"，background-origin属性没有任何效果。

2、background-origin 和background-clip很容易混淆，前者是对背景图片而言，后者是对背景而言。不是一个概念。clip默认值比origin默认值范围大，所以默认不会有裁剪效果，如果想设置裁剪，可以把origin范围设置的比clip大就好。比如：origin:'border-box',clip:'padding-box'或者'content-box'.

3、background-size中contain和cover的区别。

cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。完全覆盖，可能有图片显示不完整的情况。

contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。可能有空白区域

如下图一设置的contain,图二设置的cover

1.CSS background属性与background-image属性

在书写css样式时，background属性与background-image经常用来设置背景图片，容易搞混。

background属性包含background-image属性，是在一个声明中设置所有的背景属性。

连background-image在内，background属性包含以下：

background-color ? ? 规定要使用的背景颜色。1

background-position ? ? 规定背景图像的位置。1

background-size ? ? 规定背景图片的尺寸。3

background-repeat ? ? 规定如何重复背景图像。1

background-origin ? ? ? ?规定背景图片的定位区域。3

background-clip ? ? 规定背景的绘制区域。3

background-attachment ? ? 规定背景图像是否固定或者随着页面的其余部分滚动。1

background-image ? ? 规定要使用的背景图像。1

inherit????规定应该从父元素继承 background 属性的设置。1

通常在写css的时候，一般都直接用background做全局设置，不单独去设置。

用background做全局设置时，要将所有背景属性写在一个声明中

body { background: red }

p { background: url("chess.png") 40% / 10em gray? round fixed border-box; }

分拆写法如下

body {

? ? background-color: red;

? ? background-position: 0% 0%;

? ? background-size: auto;

? ? background-repeat: repeat;

? ? background-clip: border-box;

? ? background-origin: padding-box;

? ? background-attachment: scroll;

? ? background-image: none }

p {

? ? background-color: gray;

? ? background-position: 40% 50%;

? ? background-size: 10em 10em;

? ? background-repeat: round;

? ? background-clip: border-box;

? ? background-origin: border-box;

? ? background-attachment: fixed;

? ? background-image: url(chess.png) }

? background：no-repeat scroll??0px 0px /? 300px 300px?? rgba(0, 0, 0, 0);

? background-position与background-size之间 必须用? / 做分割?

? 前面是background-position? 后面是 background-size?

css中如何调整插入背景图片的大小

可以通过cover和contain来对图片进行伸缩。

语法：

background-size:auto;/* 默认值，不改变背景图片的高度和宽度 */

background-size:100px 50px;/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */

background-size:10%;/* 0％~100％之间的任何值，将背景图片宽高按百分比显示，当设置一个值的时候同也将其作为图片宽度来等比缩放 */

background-size:cover;/* 将背景图片等比缩放填满整个容器 */

background-size:contain;/* 将背景图片等比缩放至某一边紧贴容器边缘 */

扩展资料：

CSS背景图片自适应、全屏、填充、拉伸

方法一：js控制

div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1"??

img src="pictures/background.jpg" height="100%" width="100%"/

/div

div id="formbackground" style="position:absolute; z-index:-1;"img src="10.jpg" height="100%" width="100%"//div

script type="text/javascript"

$(function(){

$('#formbackground').height($(window).height());

$('#formbackground').width($(window).width());

});

/script

方法二：全浏览器兼容

.bg{

background:url();

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

CSS样式表控制背景图片大小

可以通过background-size属性来设定背景图片的大小。它可以是像素（px）或者是百分比(%)，举例说明：background-size:950px* 200px这表示把背景图片大小调整为宽度950像素，高度200像素。

1、background-size的语法说明：

(1)属性名:background-size

(2)属性值:其中 bg-size = [|| auto ]{1,2} | cover |

contain

(3)初始值:auto auto

(4)应用于:所有元素

(5)继承性:无

(6)百分比:后面会说明

(7)计算值:根据指定

2、代码说明：

/* 一个值: 这个值指定图片宽度，第二个值为auto */

background-size: auto

background-size: 50%

background-size: 3em

background-size: 12px

/* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */

background-size: 50% auto

background-size: 3em 25%

background-size: auto 6px

background-size: auto auto

/*多重背景，用逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以无限重复的，但必须用逗号隔开。 */

background-size: auto, auto ????/* 请区别于background-size: auto auto*/

background-size: 50%, 25%, 25%

background-size: 6px, auto, contain

background-size: inherit

扩展资料：

背景重复：

如果需要在页面上对背景图像进行平铺，可以使用?background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

背景图像将从一个元素的左上角开始。如下：

body

{

background-image: url(/i/eg_bg_03.gif); ?background-repeat: repeat-y;

}

背景定位：

可以利用?background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置：

body

{

background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat; ? ?background-position:center;

}

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

参考资料来源：w3school：CSS 背景

Css3——background属性详解

background ：背景。在css里面作为css属性一成员，通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。

颜色名称，如： background-color:red ;

十六进制背景色，如： background-color:#f00; ;

rgb颜色，这里如果是rgba，a表示透明程度，为0全透明，为1为完全不透明，

如： background-color:rgb(255,0,0.3); ;

特殊值：transparent，透明色： background-color:transparent ;

background-image属性用于为一个元素设置一个或多个背景图片，多个背景图片之间以逗号隔开。

一张图片： background-image: url(img/a.jpg);

多张图片： background-image: url(img/a.jpg),url(img/b.jpg);

特殊值：none，不显示背景图像

background-image: none;

background-repeat 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

常用的4个值：

repeat：水平和垂直方向都重复图像， background-repeat: repeat;

repeat-x：水平方向重复图像

repeat-y：垂直方向重复图像

no-repeat：图像不重复

规定背景图像是否固定或者随着页面的其余部分滚动。

scroll：背景图像相对于页面不动，会随着网页的滚动而移动，默认

fixed：背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动

background-attachment: fixed;

第一个值为横坐标，第二个值为纵坐标。默认值为：(0% 0%)。

如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。

例如： background-position: right； 代表背景图右侧，垂直方向居中的位置。

百分比位置，如：background-position: 20% 20%;

具体像素位置， 如：background-position: 20px 20px;

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

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

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

每个值可以是length, 是 percentage, 或者 [auto] 。

示例：

为了设定超过一张以上的图片尺寸时，需要提供多项数值，它们通过逗号分隔。

CSS部分 背景图片分辨率为427*640

分别给box的background-size属性添加不同的属性值，会产生不同的效果。

1、长度 ：可以用px、em、rem等指定背景图片大小，不能为负值。

background-clip 裁剪，通常和background-origin一起使用，决定设置元素的背景（背景图片或颜色）是否显示。

注：background-clip只是将背景和背景色粗暴的裁剪。

该属性有四个值

border-box

背景延伸至边框外沿（但是在边框下层）。 background-origin: border-box;

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

border-box

背景图片的摆放以border区域为参考

padding-box

背景图片的摆放以padding区域为参考

content-box

背景图片的摆放以content区域为参考

样式：

先看一下background-origin属性。

先看一下background-clip属性。

这就印证了background-clip只是将背景和背景色粗暴的裁剪。

好的，以上就是我对background的各个属性的理解，实际应用时可能会有部分出入，我们只需要掌握background-color、background-image、background-repeat、background-position、background-size这几个常用的属性即可。

欢迎大家一起交流，讨论。