css background之设置图片为背景技巧

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：表示背景图像在元素中居中对齐。

根据设计要求，我们可以选择使用不同的值来控制背景图像的位置。

相比使用像素数值，这些特殊值更加简洁易懂，但是这些特殊值无法达到非常精确的位置控制。

因此，在具体使用时，我们需要根据实际情况灵活运用这些值。

css中background-image用法

css中background-image用法
在CSS中，background-image属性用于设置元素的背景图像。

它允许您为元素设置一张或多张背景图片。

可以使用以下语法来设置background-image属性：
background-image: url('image.jpg');
此语法将图像文件的路径作为字符串值传递给url()函数。

下面是一些设置background-image属性的示例：
1. 使用单个图像：
background-image: url('image.jpg');
2. 使用多个图像：
background-image: url('image1.jpg'), url('image2.jpg');
注意：多个图像将以前面的图像为主背景，后面的图像将作为覆盖层。

3. 使用渐变背景：
background-image: linear-gradient(to bottom, #000000, #ffffff);
此语法将创建从黑色到白色的垂直渐变背景。

4. 使用背景图像平铺：
background-image: url('image.jpg');
background-repeat: repeat;
此语法将使背景图像重复平铺，以填充整个元素的宽度和高度。

总之，background-image属性是设置元素背景的重要属性之一，在您的网站或应用程序中使用时可以帮助您实现更丰富的视觉效果。

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：用于设置背景图片在元素内的位置。

使用CSS设置背景图片，图片比较大，完全显示在一个DIV中

使⽤CSS设置背景图⽚，图⽚⽐较⼤，完全显⽰在⼀个DIV中做的时候想要边框为⽐较好看的样式，需要UI切图并且放在div中，看起来会好看点像这样的，我随便挑选了⼀个，UI帮我切图出来需要把这个图⽚填到相应的div⾥⾯，但是很显然碰到⼀个问题，图⽚太⼤，⽽且放进去以后还不是响应式的那么解决问题的就来了：background:url(1.jpg);-webkit-background-size: 100px 60px;这样还不是响应式应该怎么办呢IMG加载的图⽚width设置为100%，⾼度会按照width的值⾃动等⽐率缩放背景图⽚⽤background-size 属性来控制缩放background:#00ff00 url(img.jpg) no-repeat;background-size:60% 80%;-moz-background-size:60% 80%;-webkit-background-size:60% 80%;-o-background-size:60% 80%;我当时写的是-webkit-background-size:100% 100%;就完成相要的效果了再放上相关的响应式图像<img src="..." class="img-responsive" alt="响应式图像">通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的⽀持更友好。

接下来让我们看下这个 class 包含了哪些 css 属性。

在下⾯的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按⽐例缩放，不超过其⽗元素的尺⼨。

.img-responsive {display: inline-block;height: auto;max-width: 100%;}这表明相关的图像呈现为 inline-block。

css background image的用法

css background image的用法CSS中的background-image属性用于设置元素的背景图像。

它可以接受一个URL值，指向要用作背景图像的图像文件的位置。

在本文中，我们将深入了解background-image属性的用法和一些技巧。

基本用法background-image属性可以在CSS中使用，如下所示：```background-image: url("image.jpg");```在上面的代码中，我们将图像文件的位置作为URL值传递给background-image属性。

这将使图像成为元素的背景图像。

如果您想将多个背景图像应用于同一元素，则可以使用逗号分隔它们，如下所示：```background-image: url("image1.jpg"), url("image2.jpg");```这将使两个图像都成为元素的背景图像。

第一个图像将显示在最上面，第二个图像将显示在第一个图像的下面。

背景图像的位置默认情况下，背景图像将从元素的左上角开始显示。

但是，您可以使用background-position属性来更改背景图像的位置。

例如，如果您想将背景图像放在元素的中心，可以使用以下代码：```background-position: center;```您还可以使用关键字top、bottom、left和right来指定背景图像的位置。

例如，以下代码将背景图像放在元素的右上角：```background-position: right top;```如果您想使用像素或百分比来指定背景图像的位置，则可以使用以下代码：```background-position: 50% 50%;```这将使背景图像在元素的中心水平和垂直居中。

背景图像的重复默认情况下，背景图像将在元素中重复。

但是，您可以使用background-repeat属性来更改背景图像的重复方式。

CSS的background属性及CSS3的背景图片设置总结

CSS的background属性及CSS3的背景图⽚设置总结在css中，共有如下⼏个background属性属性描述CSSbackground在⼀个声明中设置所有的背景属性。

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

1background-color设置元素的背景颜⾊。

1background-image设置元素的背景图像。

1background-position设置背景图像的开始位置。

1background-repeat设置是否及如何重复背景图像。

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

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

3background-size规定背景图⽚的尺⼨。

3从表格中，我们可以看出 background-clip ，background-origin和 background-size是css3中新增的属性。

CSS Code复制内容到剪贴板1. `background`-`clip`：border-box | padding-box | content-box | no-clip⽤来确定背景的裁剪区域。

引擎类型 Gecko Webkit Presto：CSS Code复制内容到剪贴板1. background-clip -moz-background-clip -webkit-background-clip -o-background-clip注：本属性不⽀持IE6,7,8⼀张图看懂三个属性值的区别：CSS Code复制内容到剪贴板1. background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | containcover：把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许⽆法显⽰在背景定位区域中。

css样式之background详解（格子效果）

css样式之background详解（格⼦效果）background⽤法详解：1、background-color 属性设置元素的背景颜⾊可能的值color_name 规定颜⾊值为颜⾊名称的背景颜⾊（⽐如 red）hex_number 规定颜⾊值为⼗六进制值的背景颜⾊（⽐如 #ff0000）rgb_number 规定颜⾊值为 rgb 代码的背景颜⾊（⽐如 rgb(255,0,0)transparent 默认背景颜⾊为透明2、background-image 属性设置元素的背景图⽚可能的值单个背景图⽚：background-image:url(a.png)多个背景图⽚：background-image:url(a.png),url(b.png)线性渐变：background-image:-webkit（-repeating）-linear-gradient(⽅向,颜⾊值像素或百分⽐,颜⾊值像素或百分⽐...)⽅向:left,right,top,bottom,90deg,180deg颜⾊值像素或百分⽐:yellow 10%,transparent 4px,rgb(0,0,0) 2px径向渐变：background-image:-webkit（-repeating）-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*)<bg-position>:默认为center<shape>:circle,ellipse<size>:closest-side,farthest-side,closest-corner,farthest-corner,contain or cover3、background-size 属性⽤来重设背景图⽚⼤⼩contain：缩⼩背景图⽚使其适应标签元素cover ：背景图⽚放⼤延伸到整个标签元素⼤⼩像素：标明背景图⽚缩放的尺⼨⼤⼩百分⽐：百分⽐是根据内容标签元素⼤⼩，来缩放图⽚的尺⼨⼤⼩4、background-position 属性⽤来设置背景图⽚位置可能的值：left,right,top,bottom,center,像素,百分⽐5、background-repeat 属性⽤来设置背景图⽚位置可能的值：repeat,repeat-x,repeat-y,no-repeat,space(不会被裁剪或改变⼤⼩),round(不会被裁剪但是会改变图像⼤⼩)6、background-attachment 属性⽤来设置背景图⽚是否可以滚动可能的值：scroll，fixed7、background-clip 属性⽤来规定背景的绘制区域可能的值：border-box,padding-box,content-box8、background-origin 属性⽤来规定 background-position 属性相对于什么位置来定位可能的值：border-box,padding-box,content-box扩展：绘制⽅格html代码<div>使⽤背景绘制⽅格，使每个⽂字都在⽅格⾥，效果图如下。

css网页中设置背景图片的方法详解

css⽹页中设置背景图⽚的⽅法详解css⽹页中设置背景图⽚的⽅法详解在css代码中设置背景图⽚的⽅法，包括背景图⽚、背景重复、背景固定、背景定位等⽤css设置⽹页中的背景图⽚，主要有如下⼏个属性：1，背景颜⾊ {background-color:数值}2，背景图⽚ {background-image: url(URL)|none}3，背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4，背景固定 {background-attachment:fixed|scroll}5，背景定位 {background-position:数值|top|bottom|left|right|center}6，背影样式 {background:背景颜⾊|背景图象|背景重复|背景附件|背景位置}1．背景颜⾊：background-color语法：{ padding: 0px;">说明：参数取值和颜⾊属性⼀样注意：在HTML当中，要为某个对象加上背景⾊只有⼀种办法，那就是先做⼀个表格，在表格中设置完背景⾊，再把对象放进单元格。

这样做⽐较⿇烦，不但代码较多，还要为表格的⼤⼩和定位伤些脑筋。

现在⽤CSS就可以轻松地直接搞定了，⽽且对象的范围很⼴，可以是⼀段⽂字，也可以只是⼀个单词或⼀个字母。

例⼦：给部分⽂字加背景颜⾊给部分⽂字加背景颜⾊表格背影颜⾊：代码⽰例:style=" margin-left: 0px; padding: 0px; clear: both; line-height: 24px;">2．背景图⽚：background-image语法：{background-image: url(URL)|none}说明： URL就是背景图⽚的存放路径。

如果⽤“none”来代替背景图⽚的存放路径，将什么也不显⽰。

css background image的用法

CSS background image的用法一、背景图片的基本概念在CSS中，背景图片是指在元素的背景中添加图像。

背景图片可用于网页设计、页面装饰和内容呈现等方面。

CSS提供了多种方式来使用背景图片，使页面更加丰富和吸引人。

二、CSS的background-image属性使用背景图片时，需要使用CSS的background-image属性来定义。

background-image属性的常用语法如下：background-image: url(image.jpg);其中，url()函数用来指定背景图片的路径。

可以是一个相对路径，也可以是一个绝对路径。

另外，background-image属性还支持使用gradient定义背景图片。

三、使用背景图片的基本步骤为了在网页中使用背景图片，需要经过以下几个步骤：1. 准备图片资源首先，需要准备好所需的图片资源。

可以使用自己设计的图片，也可以从网络上下载合适的图片。

在选择图片时，要注意图片的格式和大小，以确保页面的加载速度和显示效果。

2. 添加CSS样式在CSS文件中，使用background-image属性来添加背景图片。

可以通过类选择器、ID选择器或标签选择器来指定要应用背景图片的元素。

3. 设置背景图片的属性为了使背景图片在页面中显示出来，还需要设置一些背景图片的属性。

可以通过background-size、background-position、background-repeat等属性来调整背景图片的大小、位置和重复方式。

四、背景图片的常见用法在网页设计中，背景图片通常用于以下几个方面：1. 全局背景图片可以在整个页面的背景中添加一个全局背景图片，使页面的视觉效果更加丰富和统一。

可以使用body元素或顶层容器元素作为添加背景图片的对象。

2. 特定区域的背景图片除了全局背景图片，还可以为特定区域添加背景图片，以突出该区域的特点或重点内容。

可以使用div元素或其他合适的容器元素来添加背景图片。

css background之设置图片为背景技巧

css background之设置图片为背景技巧-css 背景
Background是什么意思，翻译过来有背景意思。

同样在css里面作为css属性一成员同样是有背景意思，并且是设置背景图片、背景颜色、背景图片截取等样式。

首先先来看看background有那些值（可进入CSS手册的background详细了解）
可以按顺序设置如下属性（可点击进入相应的css手册查看使用）：background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
background-attachment 背景图片是固定还是滚动
background-position 背景图片的定位
接下来我们重点来讲解css background通常的使用方法
首先我们来看下面一段代码
background:url(bgimg.gif) no-repeat 5px 5px;
如下图解释
从图上的CSS background解析图我们可以详细了解到background的css属性使用方法。

background:url(bgimg.gif) no-repeat 5px 5px;这样的css背景表达可以节约和优化css文件代码。

学习者可以使用和测试更改background各个属性来了解和掌握关于css background。

CSS3background分别设置多个背景图片

1 2 3 4 5 6 7 #example1{width:500px;height:250px;background-image:url(sheep.png),url(betweengrassandsky.png); background-position:center bottom,left top;background-repeat:no-repeat;}它是如何工作的呢？1 2 3 4 background-image: <bg-image> [ , <bg-image> ]*<bg-image> = <image> | none<strong>Note: a value of ‘none’ still generates a layer.</strong> 1 background-image:url(sheep.png),url(betweengrassandsky.png);CSS3 中加以此逗号同样支持以下属性：1. background-repeat2. background-attachment3. background-position ,4. background-clip ,5. background-origin6.background-size . 源码例子：XHTML1 background-position:center bottom,left top;1 23 4 5 6 7 background: [ <bg-layer> , ]* <final-bg-layer><bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box>{1,2} <final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> ||<attachment> || <box>{1,2} || <background-color> <spanstyle="color: #993300;"><strong>Note: background-color is only permitted in the final background layer.</strong></span>1 background:url(sheep.png)center bottom no-repeat,url(betweengrassand sky.png)left top no-repeat;浏览器兼容性：支持目前主流浏览器及支持css3标准的所有浏览器。

background css用法

Background CSS用法什么是Background CSS？在CSS中，背景是指元素后面的区域。

通过使用Background CSS属性，我们可以设置元素的背景颜色、图片、位置等。

Background CSS提供了丰富的选项，使我们能够创建各种各样的背景效果。

基本语法在CSS中，通过以下语法来设置元素的背景：selector {background-color: value;background-image: value;background-repeat: value;background-position: value;background-size: value;background-attachment: value;}•background-color：用于设置元素的背景颜色。

•background-image：用于设置元素的背景图片。

•background-repeat：用于设置如何重复平铺背景图片。

•background-position：用于设置背景图片的位置。

•background-size：用于控制背景图片的尺寸。

•background-attachment：用于控制背景图片是否随滚动而移动。

背景颜色使用background-color属性可以为元素设置一个背景颜色。

可以使用颜色名称、十六进制值或RGB值来指定颜色。

selector {background-color: red; /* 使用颜色名称 */background-color: #ff0000; /* 使用十六进制值 */background-color: rgb(255, 0, 0); /* 使用RGB值 */}背景图片使用background-image属性可以为元素设置一个背景图片。

可以使用相对路径或绝对路径来指定图片的位置。

selector {background-image: url("image.jpg"); /* 使用相对路径 */background-image: url(""); /* 使用绝对路径 */}背景重复默认情况下，背景图片会在水平和垂直方向上平铺重复。

backgroundposition用法

backgroundposition用法Background-position用法在CSS中，background-position属性用于设置背景图像的起始位置。

这个属性接受一个由两个关键字、百分比、或长度值组成的值对，第一个值表示水平方向上的位置，第二个值表示垂直方向上的位置。

如果只有一个值，则它被视为水平和垂直方向上相同的值。

语法：background-position: x-axis y-axis;其中，x-axis和y-axis可以是以下任意一种：1.关键字left：背景图片左对齐center：背景图片居中对齐right：背景图片右对齐top：背景图片顶部对齐bottom：背景图片底部对齐2.百分比可以使用百分比来指定相对于容器元素的位置。

例如，50% 50%表示居中对齐。

3.长度单位可以使用像素、英寸、厘米等长度单位来指定距离。

例如，10px20px表示距离左边界10像素，距离上边界20像素。

4.混合单位可以混合使用像素和百分比来指定距离。

例如，50% 20px表示水平方向上居中，垂直方向上距离上边界20像素。

5.多个值还可以同时指定多个值，用逗号隔开。

例如，left top, 20px 30px表示水平方向上左对齐，垂直方向上顶部对齐，距离左边界20像素，距离上边界30像素。

使用实例以下是几个实际的例子来演示background-position的用法：1.指定背景图片居中对齐background-position: center;2.指定背景图片距离左边界10像素，垂直方向上居中对齐background-position: 10px center;3.指定背景图片距离右边界20像素，垂直方向上距离底部30像素background-position: right 20px bottom 30px;4.使用百分比来设置背景图片位置background-position: 50% 50%;5.使用混合单位来设置背景图片位置background-position: center 20px;6.同时指定多个值设置背景图片位置background-position: left top, 20px 30px;注意事项1.background-position属性不会影响元素的大小或形状。

CSS背景background、background-position使用详解

CSS背景background、background-position使⽤详解背景(background)是css中⼀个重要的的部分，也是需要知道的css的基础知识之⼀。

这篇⽂章将会涉及css背景(background)的基本⽤法，包括诸如 background-attachment 等的属性，也会介绍⼀些有关背景(background)的常⽤技巧，以及 css3 中的背景(background)(包含4个新的背景(background)属性)。

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 属性⽤纯⾊来填充背景。

有许多⽅式指定这个颜⾊，以下⽅式都得到相同的结果。

CSS Code复制内容到剪贴板1. background-color: blue;2. background-color: rgb(0, 0, 255);3. background-color: #0000ff;background-color 也可被设置为透明（transparent），这会使得其下的元素可见。

cssbackground-size与背景图片填满div

cssbackground-size与背景图⽚填满divbackground-size与背景图⽚填满div在开发中，常有需要将⼀张图⽚作为⼀个div的背景图⽚充满div的需求background-size的取值及解释background-size共有三种属性，分别为background-size: coverMDN⽂档解释说明：缩放背景图⽚以完全覆盖背景区，可能背景图⽚部分看不见。

A keyword that is the inverse of contain.Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right ortop/bottom.这⾥的关键说明在于标红的两个区域，分别是它会保持图⽚的宽⾼⽐和当图像和容器具有不同的尺⼨时，图像被左/右或顶部/底部裁剪。

之后会结合例⼦说明background-size: containMDN⽂档解释说明：缩放背景图⽚以完全装⼊背景区，可能背景区部分空⽩。

A keyword that scales the image as large aspossible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.这⾥的关键说明在于标红的两个区域，分别是它会保持图⽚的宽⾼⽐和当图像和容器具有不同的尺⼨时，空区域（左/右/上/右）填充背景⾊。

CSSbackground之设置图片为背景技巧

CSSbackground之设置图⽚为背景技巧⾸先先来看看background有那些值:可以按顺序设置如下属性（可点击进⼊相应的css⼿册查看使⽤）：background-color 背景颜⾊background-image 背景图⽚background-repeat 背景重复background-attachment 背景图⽚是固定还是滚动background-position 背景图⽚的定位接下来我们重点来讲解css background通常的使⽤⽅法⾸先我们来看下⾯⼀段代码background:url(bgimg.gif) no-repeat 5px 5px;如下图解释:background:background为符合属性.属性如下:background:background-color ||background-image || background-repeat || background-attachment || background-positionborder-style: none; margin-top: 5px; margin-bottom: 5px; color: rgb(0, 0, 0); font-family: 'black Verdana', Arial, Helvetica, sans-serif;">默认值:tansparent取值描述(背景颜⾊)例⼦效果transparent背景颜⾊透明 <div style="background-color:Aqua"><span style="border:solid 1px black">span</span><br /> div</div>color 指定颜⾊1.系统定义的颜⾊2.rgb(100,100,100)3.#FFEE11<div style="background-color:Silver">和谐社会</div><div style="background-color:rgb(100,200,90)">和谐社会</div><div style="和谐社会</div>background-image:默认值:none取值描述(背景图⽚)例⼦效果none没有背景图⽚ <div style="background-image:none">Background</div>url(url)使⽤绝对或相对的url指定背景图⽚<div style="background-image:url('del.gif')"></div>background-repeat:默认值:repeat取值描述(背景平铺)例⼦效果repeat在横向和纵向上平铺<div style="background-image:url('del.gif'); background-repeat:repeat"></div><div style="background-image:url('del.gif'); background-repeat:no-repeat">no-repeat不平铺<div style="background-image:url('del.gif'); background-repeat:no-repeat"> </div>repeat-x在横向上平铺<div style="background-image:url('del.gif'); background-repeat:repeat-x"></div>repeat-y在纵向上平铺<div style="background-image:url('del.gif'); background-repeat:repeat-y"></div>background-attachment:默认值:scroll取值描述(背景滚动)例⼦效果scroll跟随内容滚动<body style="background-image:url('del.gif'); background-repeat:no-repeat;background-attachment:scroll"></body>随着滚动条的移动,可能就看不到了.fixed不论怎样滚动,始终固定在页⾯上<body style="background-image:url('del.gif'); background-repeat:no-repeat;background-attachment:fixed "></body>始终显⽰background-position:默认值:0% 0%如果只指定了⼀个值，该值将⽤于横坐标。

css之background的cover和contain的缩放背景图

css之background的cover和contain的缩放背景图对于这两个属性，官⽹是这样解释的：此时会保持图像的纵横⽐并将图像缩放成将适合背景定位区域的最⼤⼤⼩。

contain等⽐例缩放图象到垂直或者⽔平其中⼀项填满区域。

此时会保持图像的纵横⽐并将图像缩放成将完全覆盖背景定位区域的最⼩⼤⼩。

cover等⽐例缩放图象到垂直和⽔平两项均填满区域。

读了还是不懂，那么看下⾯的例⼦：contain，按⽐例调整背景图⽚，使得其图⽚宽⾼⽐⾃适应整个元素的背景区域的宽⾼⽐，因此假如指定的图⽚尺⼨过⼤，⽽背景区域的整体宽⾼不能恰好包含背景图⽚的话，那么其背景某些区域可能会有空⽩。

看以下代码.im-com{width:200px;height:50px;background:url(/mystar/mada4.jpg) no-repeat top left scroll; /*图⽚的宽⾼为440*440，⽽元素相对区域⾼度为50*/background-size:contain;}.im-com-1{width:50px;height:100px;background:url(/mystar/mada4.jpg) no-repeat top left scroll; /*元素相对区域宽度为50*/background-size:contain;}当图⽚恰好⾃适应铺满元素的宽度或者⾼度，那么元素的会有空⽩处存在，也就是图中红⾊框框都显⽰了空⽩。

3 . cover，按⽐例调整背景图⽚，这个属性值跟contain正好相反，背景图⽚会按照⽐如⾃适应铺满整个背景区域。

假如背景区域不⾜以包含背景图⽚的话，那么背景图⽚就会被咔嚓。

.im-com{width:200px;height:50px;background:url(/mystar/mada4.jpg) no-repeat top left scroll; /*图⽚的宽⾼为440*440，⽽元素相对区域⾼度为50*/background-size:cover;}.im-com-1{width:50px;height:100px;background:url(/mystar/mada4.jpg) no-repeat top left scroll; /*元素相对区域宽度为50*/background-size:cover;}当使⽤了cover这个值的时候，那么正好就跟contain相反，其会正好覆盖整个背景相对区域，但是背景图⽚的某些部分就看不见。