CSS背景属性Background详解
CSS背景图像background属性简写
CSS背景图像background属性简写background属性简写background属性可以像margin padding属性⼀样，有简写⽅法，它的简写顺序是：1. background-color2. background-image3. background-repeat4. background-attachment5. background-position如果某属性不想写，可以忽略。
下⾯的代码演⽰了background属性简写的⽤法。
<!DOCTYPE html><html><head><title>background简写</title><style type="text/css">body {background: url("") no-repeat center top;color: #665544;padding: 20px;}h1 {color: white;}</style></head><body><h1>软件开发，成就梦想</h1><h2>学编程，上利永贞⽹ </h2><p>我们能为中国‘996’程序员做些什么？怎样才能能引起西⽅媒体和政府的关注？</p><p>在程序员圈⼦⾥颇有名⽓的代码托管平台GitHub上，有⼈发起了⼀个名为“996.ICU”的项⽬，意为“⼯作996，⽣病ICU”，“996”即许多企业的程序员⼯作状态，从上午9点⼲到晚上9点，每周⼯作6天。
这⼀项⽬得到了⼤量程序员的响应，⾃从3⽉26⽇注册以来，截⾄4⽉2⽇Star数已突破15万整数关⼝，表⽰⾄少有15万名程序员关注了这个项⽬。
</p></body></html>。
css background用法和搭配
css background用法和搭配
CSS的background属性用于设置元素的背景样式。
通过background属性，可以设置元素的背景颜色、图片、重复方式、位置等属性。
以下是一些常用的background属性值及其搭配方式：
1. background-color：设置元素的背景颜色。
示例：background-color: #F5F5F5;（设置背景颜色为浅灰色）
2. background-image：设置元素的背景图片。
示例：background-image: url("image.jpg");（设置背景图片为名为image.jpg 的图片）
3. background-repeat：设置背景图片的重复方式。
示例：background-repeat: no-repeat;（设置背景图片不重复）
4. background-position：设置背景图片的位置。
示例：background-position: center;（将背景图片居中显示）
5. background-size：设置背景图片的大小。
示例：background-size: cover;（将背景图片拉伸以填满整个元素）
6. background-attachment：设置背景图片是否随元素滚动而滚动。
示例：background-attachment: fixed;（固定背景图片，不随元素滚动）
通过组合使用不同的background属性，可以实现各种背景样式的显示效果，例如渐变背景、带有背景图片的背景等等。
background-position的用法
background-position的用法background-position是CSS中控制背景图像位置的一个属性。
使用background-position可以改变背景图片在元素中的定位位置。
这个属性需要设置两个值，以水平和垂直方向的像素数值来控制图像位置。
在实际开发中，background-position可以根据设计要求，对背景图像进行细微的调整，使其在视觉效果上更加优美。
X值指定背景图像在水平方向上的定位位置，可以使用像素数值、百分比、left、center和right等值。
Y值指定背景图像在垂直方向上的定位位置，可以使用像素数值、百分比、top、center和bottom等值。
eg:1. 设置背景图像在元素中水平居中2. 将背景图像坐标系的原点从默认左上方移动到右下角，使背景图像全局右下对齐：3. 将背景图像的左上角与元素的左上角重合4. 将背景图像的中心点与元素的中心点对齐5. 将背景图像水平居中，垂直方向向下位移20px在实际开发中，我们通常会根据设计要求使用百分比或像素数值来设置background-position。
使用百分比可以保证背景图像在元素不同尺寸下的相对位置不变，而使用像素数值则可以更加精确地控制背景图像的位置。
除了用两个数值来确定背景图像在元素中的位置外，CSS还提供了一些特殊的值来控制background-position：- left/top：表示背景图像在元素中的左边缘或上边缘对齐。
- right/bottom：表示背景图像在元素中的右边缘或下边缘对齐。
- center：表示背景图像在元素中居中对齐。
根据设计要求，我们可以选择使用不同的值来控制背景图像的位置。
相比使用像素数值，这些特殊值更加简洁易懂，但是这些特殊值无法达到非常精确的位置控制。
因此，在具体使用时，我们需要根据实际情况灵活运用这些值。
浅谈background的用法
浅谈background的⽤法div css 背景样式background属性⼀、语法及参数1、语法：background : background-color(颜⾊) || background-image(图⽚地址) || background-repeat(平铺⽅式) || background-attachment(固定⽅式) || background-position(定位⼤⼩)2、background参数：background属性是复合属性。
通俗说background后值可以设置为多值，包括背景颜⾊，背景图⽚等等，以及位置和平铺⽅式的更改等等。
⼆、background写法1、整体写background:url(图⽚地址) no-repeat 20px 20px;2、分开写就需要⽤到background-image:url(图⽚地址);background-repeat(平铺⽅式) background-position(定位)三、background详解分析css background背景样式结构分析上⾯（⼆）中的css进⾏⼀个详细的说明1>url我就不说了没什么可以说的2>平铺⽅式repeat:默认的，背景图像将在垂直⽅向和⽔平⽅向重复。
repeat-x：背景图像将在⽔平⽅向重复，当然y的话就是垂直了no-repeat:图⽚显⽰⼀次inherit：简单来说的话就是继承⽗元素的3>定位上⾯的20px 20px分别代表的意思是 --------->距左边20px，距上边20px接下来第⼀个20px的位置实际上有三个属性left right center 图⽚靠左开始显⽰靠右⽔平居中第⼆个20px位置也有三个属性top bottom center 图⽚靠上开始显⽰靠下垂直居中四、设置背景颜⾊1、背景颜⾊设置实例CSS代码background:red设置背景颜⾊为红⾊2、承接上⾯的代码我们可以如下操作background:red url(图⽚地址) no-repeat 20px 20px;这段css代码和上⾯差不多，唯⼀多的地⽅就是背景图⽚显⽰不到的地⽅就是⽤红⾊代替。
关于background与background-image用法
关于background与background-image⽤法
background 简写属性在⼀个声明中设置所有的背景属性。
可以设置如下属性：
background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image
如果不设置其中的某个值，也不会出问题，⽐如 background:#ff0000 url('smiley.gif'); 也是允许的。
通常建议使⽤这个属性，⽽不是分别使⽤单个属性，因为这个属性在较⽼的浏览器中能够得到更好的⽀持，⽽且需要键⼊的字母也更少。
2，background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺⼨，包括内边距和边框，但不包括外边距。
默认地，背景图像位于元素的左上⾓，并在⽔平和垂直⽅向上重复。
简单来讲，background与background-image是包含关系，前者可以完成后者的功能，但后者不可以。
通常在写css的时候，⼀般来讲都直接⽤background做全局设置，不单独去设置。
background属性详解
background属性详解1. 定义和⽤法background是⼀个简写属性，可以在⼀个声明中设置所有的背景属性，可设置的属性如下：background-colorbackground-positionbackground-sizebackground-repeatbackground-originbackground-clipbackground-attachmentbackground-image这些属性在background中不必全部设置，⽐如：background：#0ff url(bg.jpg) no-repeat，官⽅对属性的顺序也没有强制要求，但是为了⽅便起见，个⼈建议按照background-color，background-image，background-repeat，background-attachment，background-position，background-size，background-origin，background-clip的顺序进⾏声明。
另外值得⼀提的是，如果需要在同时声明background-position和background-size，由于其单位可能是相同的，所以要按照background-position/background-size的规则进⾏声明，⽐如：background:50px 50px/50px 50px，如果只需要声明⼀个，那么这个值是background-position。
同理，background-origin和background-clip的取值也是相同的，在同时设置两个的时候，顺序为background-origin background-clip，⽐如：background:padding-box content-box，声明⼀个时，这个值是background-clip。
2. background-color说明：规定背景颜⾊浏览器⽀持：所有浏览器（IE8及之前版本不⽀持inherit属性值）语法：background-color：<color>默认值：transparentjs语法：object.style.backgroundColor="#00FF00"可能的值：d_color：颜⾊名称，如red；2.hex_number：⼗六进制颜⾊，如#fff000；3.rgb()：rgb代码颜⾊，如rgb(0,255,255)；4.rgba()：同3，可是设置透明度，取值0-1，如rgba(0,255,255,.5)；5.hsl()：设置⾊调（0-360）、饱和度（0.0-100.0%）和亮度（0.0-100.0%）；6.hsla()：同5，可以设置透明值，取值0-1；7.transparent：透明，默认值；8.inherit：规定应该从⽗元素继承 background-color 属性的设置。
backgroundimage用法
backgroundimage用法
backgroundimage是一种CSS(Cascading Style Sheets)属性，可以在指定的容器中插入一个背景图片。
一、backgroundimage属性的基本格式：backgroundimage:url('');
二、backgroundimage属性的基本用法：
1、设置容器背景：使用backgroundimage属性可以让指定的容器中插入一个背景图片，以替代默
认的前景色背景色，使容器中拥有更丰富的显示内容。
2、自动重复背景图片：使用backgroundimage属性，你可以在容器中插入一个背景图片，然后指定background-repeat属性的值为“repeat”，以实现自动重复背景图片的效果。
3、指定背景图片滚动位置：如果你要指定背景图片的滚动位置，可以使用backgroundposition属性来指定具体的位置。
4、根据容器大小缩放背景图片：当你想让容器中
插入的背景图片根据容器大小进行自适应缩放时，可以使用backgroundsize属性来指定背景图片的
缩放大小。
5、指定背景图片拼合模式：使用backgroundimage属性，你可以根据需要指定背景图片的拼合模式，包括：repeat，repeat-x，repeat-y，no-repeat等拼合模式。
三、backgroundimage属性实例：
backgroundimage：url(images/bg.jpg);
background-repeat：repeat;
background-position：top；background-size：contain;。
css background 用法
css background 用法摘要：1.CSS 背景概述2.CSS background 的属性3.CSS background 的用法示例正文：【CSS 背景概述】CSS 背景属性可以用于设置元素的背景图片、颜色或渐变。
它可以为网页增加视觉吸引力，提高用户体验。
CSS background 属性有以下几个常用的值：- background-color：设置元素的背景颜色。
- background-image：设置元素的背景图片。
- background-repeat：设置背景图片是否需要平铺，以及平铺的方式。
- background-position：设置背景图片在元素内的位置。
- background-size：设置背景图片的大小。
【CSS background 的属性】以下是CSS background 属性的详细说明：- background-color：用于设置元素的背景颜色，例如：```cssdiv {background-color: red;}```- background-image：用于设置元素的背景图片，例如：```cssdiv {background-image: url("image.jpg");}```- background-repeat：用于设置背景图片是否需要平铺，以及平铺的方式。
取值有以下几种：- repeat：水平和垂直方向上都进行平铺。
- repeat-x：水平方向上进行平铺。
- repeat-y：垂直方向上进行平铺。
- no-repeat：不平铺，图片只在元素的左上角显示。
- inherit：从父元素继承背景图片平铺方式。
例如：```cssdiv {background-image: url("image.jpg");background-repeat: no-repeat;}```- background-position：用于设置背景图片在元素内的位置。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS背景属性Background详解本文详解了CSS的背景属性Background，包括CSS3中新增的背景属性。
如果你是个CSS初学者，还可以查看之前介绍的CSS浮动属性和CSS透明属性详解。
css2 中的背景（background）CSS2 中有5个主要的背景（background）属性，它们是：background-color：指定填充背景的颜色。
background-image：引用图片作为背景。
background-position：指定元素背景图片的位置。
background-repeat：决定是否重复背景图片。
background-attachment：决定背景图是否随页面滚动。
这些属性可以全部合并为一个缩写属性：background。
需要注意的一个要点是背景占据元素的所有内容区域，包括padding 和border，但是不包括元素的margin。
它在Firefox，Safari ，Opera 以及IE8 中工作正常，但是IE6 和IE7 中，background 没把border 计算在内。
基本属性背景色（background-color）代码background-color： #0000ff;background-color 也可被设置为透明（transparent），这会使得其下的元素可见。
背景图（background-image）background-image 属性允许指定一个图片展示在背景中。
可以和background-color 连用，因此如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。
代码很简单，只需要记住，路径是相对于样式表的，因此以下的代码中，图片和样式表是在同一个目录中的。
background-image： url（image.jpg）;但是如果图片在一个名为images 的子目录中，就应该是：background-image： url（images/image.jpg）;背景平铺（background-repeat）设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。
这也许是你需要的，但是有时会希望图片只出现一次，或者只在一个方向平铺。
以下为可能的设置值和结果：代码*/背景定位（background-position）background-position 属性用来控制背景图片在元素中的位置。
技巧是，实际上指定的是图片左上角相对于元素左上角的位置。
下面的例子中，设置了一个背景图片并且用background-position 属性来控制它的位置，同时也设置了background-repeat 为no-repeat。
计量单位是像素。
第一个数字表示x 轴（水平）位置，第二个是y 轴（垂直）位置。
代码background-position 属性可以用其它数值，关键词和百分比来指定，这比较有用，尤其是在元素尺寸不是用像素设置时。
关键词是不用解释的。
x 轴上：* left* center* righty 轴上：* top* center* bottom顺序方面和使用像素值时的顺序几乎一样，首先是x 轴，其次是y 轴，像这样：background-position： top right;使用百分数时也类似。
需要主要的是，使用百分数时，浏览器是以元素的百分比数值来设置图片的位置的。
看例子就好理解了。
假设设定如下：background-position： 100% 50%;使用百分数定位时，其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。
也就是说，百分数定位是改变了背景图和元素的对齐基点。
不再像使用像素和关键词定位时，使用背景图和元素的左上角为对齐基点。
例如上例的background-position：100% 50%; 就是将背景图片的100%（right）50%（center）这个点，和元素的100%（right）50%（center）这个点对齐。
背景附着background-attachment属性决定用户滚动页面时图片的状态。
三个可用属性为scroll（滚动），fixed（固定）和inherit（继承）。
inherit 单纯地指定元素继承他的父元素的background-attachment 属性。
为了正确地理解background-attachment，首先需要明白页面（page）和视口（view port）是如何协作地。
视口（view port）是浏览器显示网页的部分（就是去掉工具栏的浏览器）。
视口（view port）的位置固定，不变动。
当向下滚动网页时，视口（view port）是不动的，而页面的内容向上滚动。
看起来貌似视口（view port）向页面下方滚动了。
如果设置background-attachment：scroll，就设置了当元素滚动时，元素背景也必需随着滚动。
简而言之，背景是紧贴元素的。
这是background-attachment 默认值。
用一个例子来更清楚地描述下：background-image： url（test-image.jpg）;background-position： 0 0;background-repeat： no-repeat;background-attachment： scroll;当向下滚动页面时，背景向上滚动直至消失。
但是当设置background-attachment 为fixed 时，当页面向下滚动时，背景要待在它原来的位置（相对于浏览器来说）。
也就是不随元素滚动。
用另一个例子描述下：background-image： url（test-image.jpg）;background-position： 0 100%;background-repeat： no-repeat;background-attachment： fixed;页面已经向下滚动了，但是图像仍然保持可见。
需要重视的一点是背景图只能出现在它父元素能达到的区域。
即使图片是相对于视口（view port）定位地，如果它的父元素不可见，图片就会消失。
参见下面的例子。
此例中，图片位于视口（view port）的左下方，但是只有元素内的图片部分是可见的。
background-image： url（test-image.jpg）;background-position： 0 100%;background-repeat： no-repeat;background-attachment： fixed;因为图片开始在元素之外，一部分图片被切除了。
背景的简写属性可以把背景的各个属性合为一行，而不用每次都单独把他们写出来。
格式如下：background：《color》《image》《position》《attachment》《repeat》例如，下面的声明background-color： transparent;background-image： url（image.jpg）;background-position： 50% 0 ;background-attachment： scroll;background-repeat： repeat-y;可以合为单独一行：background：transparent url（image.jpg）50% 0 scroll repeat-y; 而且不需要指定每一个值。
如果省略值地话，就使用属性地默认值。
例如，上面那行和下面这个效果一样：background：url（image.jpg）50% 0 repeat-y;背景的一般用法除了可以用来使元素更加优雅这类显然的用法之外，背景也可以用于其它的目的。
仿栏当使用css的float 属性来定位布局元素时，要确保两栏或多栏有相同的长度是比较困难的。
如果长度不同，其中一栏的背景会比另外的短，这会破坏整个设计。
仿栏是个非常简单的背景技巧，这个技巧最早发表在A List Apart 。
思路很简单：不再给每列单独设置背景，而是给各列的父元素设置一个背景图。
所有栏的设计都包含在这张图片之中。
文本替换在网页上，对于字体的选择是相当有限的。
可以使用sIFR之类的工具来定制字体，但是这需要用户启用JavaScript 。
一个适用于任意浏览器的简单方法是，用想用的字体来做一张文本图片，并用这张图片作为背景。
这样，文本依然出现在文档标记中以供搜索引擎检索和屏幕浏览器识别，但是在浏览器中就会显示首选的字体。
例如，HTML 标记可能是这样的：《h3》Blogroll《/h3》假如有一个200 乘75 的图片，上面有更好看的字体，就可以用如下方式来替换文本：代码}简单的圆点无需列表中的圆点看起来很难看。
不用再处理所有不同的list-style 属性，只需要简单地把他们隐藏并用背景图代替就可以了。
因为图片可以随意选择，这些圆点就可以看起来更漂亮。
下面，我们把一个无需列表改造成有圆滑圆点的：代码CSS3 中的背景CSS3 中的背景有较多改进。
最显著的是多背景图片的选项，同时也增加了4个新属性。
多背景CSS3 中，可以对一个元素应用一个或多个图片作为背景。
代码和css2 中的一样，只需要用逗号来区别各个图片。
第一个声明的图片定位在元素顶部，其它的图片按序在其下排列，例如：background-image：url（top-image.jpg），url（middle-image.jpg），url（bottom-image.jpg）;新属性：背景修剪（background-clip）这又把我们带回了文章开始讨论的那个关于边框内图片显示的话题。
它被描述为“背景描绘区”。
background-clip 属性用来增强背景显示位置的控制能力。
可能的值为：* background-clip：border-box;背景显示在边框内。
* background-clip：padding-box;背景显示在内补白（padding）内，而不是边框内。
* background-clip：content-box;只在内容内显示背景，而不是内补白（padding）和边框内。
* background-clip：no-clip;默认值，和border-box 一样。
新属性：背景原点（background-origin）这个属性和background-position 结合起来使用。
可以从边框，内补白或者内容盒子开始计算background-position （类似于background-clip）。
* background-origin：border-box;以边框为原点开始计算background-position.* background-origin：padding-box;以内补白为原点开始计算background-position* background-origin：content-box;以内容盒子为原点开始计算background-position对于background-clip 和background-origin 不同的一个解释参看新属性：背景尺寸（background-size）background-size 用来调整背景图的大小。