css中background属性 css margin属性

大家好，今天小编来为大家解答css中background属性这个问题，css margin属性很多人还不知道，现在让我们一起来看看吧！

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这几个常用的属性即可。

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

一文搞定background属性及属性值,css背景属性全家桶

盒模型可以看成由元素外边距（margin）、元素边框（border）、元素内边距（padding）和元素内容（content） 4部分组成，不过这只是从2D的视角来看盒模型的组成，而今天笔者将阐述如何从3D的视角看待盒模型的组成。

从2D视角看盒模型示意图：

从3D视角看盒模型示意图：

背景图片在z轴上比背景颜色更靠近用户，背景图片在完全不透明的情况下，会完全遮盖住背景颜色。

背景图片的定位参考系与背景裁剪：

background-origin的默认值是padding-box，代表的是背景图片开始的原点。

background-origin:border-box;图像从边框开始显示，表示以表框左上角为原点展开背景图片。

background-origin:padding-box;图像从内边距开始显示（默认），表示以内填充区左上角为原点展开背景图片。

background-origin:content-box;图像从内容开始显示，表示以内容区的左上角为原点展开背景图片。

背景裁剪的默认值是border-box，背景从边框（包括border区域）开始裁剪，表示裁剪超出边框区的内容。

background-clip:border-box;图像从边框（包括border区域）开始裁剪（默认），表示裁剪超出边框区的内容。

background-clip:padding-box;图像从内边距（包括padding）开始裁剪，表示裁剪超出内填充区的内容。

background-clip:content-box;图像从内容（包括content）开始裁剪，表示裁剪超出内容区的内容。

还有一个取值是background-clip:text，表示文本剪裁(字体加背景)。

background-clip的兼容写法：

/*Firefox3.6-*/

-moz-background-clip: border-box|| padding-box|| context-box|| no-clip

/*Webkit*/

-webkit-background-clip: border-box|| padding-box|| context-box|| no-clip|| text

/*opera*/

-o-background-clip: border-box|| padding-box|| context-box|| no-clip

/*W3C标准 Firefox4.0+*/

background-clip: border-box|| padding-box|| context-box|| no-clip|| text

浏览器兼容问题：

-webkit-谷歌浏览器的内核标识码

-moz-火狐浏览器的内核标识码

-o-欧朋浏览器的内核标识码

-ms- IE浏览器的内核标识码

注意：要和-webkit-text-fill-color属性设置为transparent，确保文字的填充色为透明色，一起使用。

/*注意：使用border-box的时候，border颜色必须是rgba颜色，不然会没有效果*/

对于background-clip和background-origin的区别在于，background-clip是针对背景图片的裁剪，而background-origin则是设置背景图片的起始点。

background-size的设置方法：

设置背景图片高度和宽度（10px 30px）。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)。

将计算相对于背景定位区域的百分比(30% 30%)。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"。

cover:此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。背景图不会变形，但是超出区域会被裁减掉。

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

background-position属性的使用：

background-position总共有5个属性，分别是top、right、bottom、left、center，这个5个属性可以单独使用，也可以两两使用。单独使用时，默认第二个参数为center。

背景图片的位置：

属性值： x y

背景图片的位置调整可以使用xpos ypos（都为正值时，往右往下移动）和单词（仅指定一个关键字，其他值将会是"center"）。

百分比：x% y%，第一个值是水平位置，第二个值是垂直位置。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。默认值为：0％0％。

给div设置banner背景，div只设置高度：

正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下：

给div设置height（高度为banner图的高度），不需要设置宽度（因为宽度会自动霸占整行）。

背景图片的固定或滚动：

background-attachment属性支持的值以及含义：...

文字效果的实现：

text-shadow凹凸文字效果：...

含有背景图片的文字、渐变色无缝滚动的文字：

background-clip:text背景显示在文字内部，text属性兼容问题：...

混合模式的定义：

background-blend-mode属性定义了背景层的混合模式（图片与颜色）。

可能的值：...

backface-visibility属性的定义：

backface-visibility属性定义当元素不面向屏幕时是否可见。

渐变的使用：

渐变：background-image：...

线性渐变和径向渐变的使用示例：

线性渐变示例图：...

径向渐变示例图：...

重复渐变的使用：...

background简写：

background提供简写用法，即在一个声明中可设置所有的背景属性。

所有属性如下：...

建议顺序：...

背景图片与img标签的对比：

背景图片不占用content内容部分，而img标签会占用。

背景图片大小如果超出盒子是不会显示的，而img标签如果超出父级盒子默认是会超出显示的。

何时使用背景图片，何时使用img标签取决于实际情况，可根据需要选择。

CSS background-position的定义和用法

background-position属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment属性设置为 fixed，才能保证该属性在 Firefox和 Opera中正常工作。默认值： 0% 0%继承性： no版本： CSS1 JavaScript语法： object.style.backgroundPosition=center如何定位背景图像：

body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}

背景位置属性用于设置背景图像的位置，这个属性只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。 background-positon:长度单位/关键字;语法中的取值包括两种，一种是采用长度单位，另一种是关键字描述。长度单位指的是px、百分比等。当background-position取值为关键字时，也需要设置水平方向和垂直方向的值，只不过值不是使用px为单位的数值，而是使用关键字代替。属性值说明top left左上top center靠上居中top right右上left center靠左居中center center正中right center靠右居中bottom left左下bottom center靠下居中bottom right右下

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！