背景颜色属性(background-color)
这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。
body {background-color:#99FF00;}
上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。
背景图片属性(background-image)
这个属性为HTML元素设定背景图片，相当于HTML中background属性。
<body style="background-image:url(../images/css_tutorials/background.jpg)">
上面的代码为Body这个HTML元素设定了一个背景图片。
背景重复属性(background-repeat)
这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。
repeat-x 背景图片横向重复
repeat-y 背景图片竖向重复
no-repeat 背景图片不重复
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}
上面的代码表示图片竖向重复。
背景附着属性(background-attachment)
这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。这个属性有两个值，一个是scroll，一个是fixed。缺省值是scroll。
body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}
上面的代码表示图片固定不动，不随内容滚动而动。
背景位置属性(background-position)
这个属性和background-image属性连在一起使用，决定了背景图片的最初位置。
body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
上面的代码表示背景图片的初始位置距离网页最左面20px，距离网页最上面60px。
背景属性(background)
这个属性是设置背景相关属性的一种快捷的综合写法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。
body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}
上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.jpg图片，背景图片不重复显示，背景图片不随内容滚动而动，背景图片距离网页最左面40px，距离网页最上面100px。
分享到：
相关推荐
### CSS背景属性详解与实践案例 #### 一、引言 在网页设计中，CSS (Cascading Style Sheets) 背景属性是用于控制页面背景的重要工具之一。通过合理运用这些属性，可以极大地增强页面的视觉效果和用户体验。本文将...
下面将详细介绍CSS背景属性的相关知识点。 1. **背景颜色 (background-color)** - `background-color`属性用于设置元素的背景颜色。可以使用颜色名称、RGB、RGBA、HSL、HSLA或者透明度（transparent）来定义。例如...
对于图片，首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样，那么就从CSS控制背景图片讲起吧。
组合背景属性 (background shorthand) 为了简化CSS代码，可以使用单一的background属性来同时设置多个背景属性，包括颜色、图片、重复、定位和附着等。例如：body {background: #99FF00 url(../images/css_tutorials...
### CSS背景属性 背景属性允许我们对HTML元素设置背景颜色、图像、重复方式、位置以及透明度等。主要的背景属性包括： 1. **background-color**: 设置元素的背景颜色。例如：`background-color: #ff0000;` 将背景...
CSS背景属性是网页设计中不可或缺的一部分，它允许开发者为元素设置丰富多彩的背景，增强视觉效果。本文将通过五个具体的实例来深入理解并掌握这些背景属性的使用。 首先，我们来看第一个实例：Li列表的背景应用。...
**CSS背景属性**提供了丰富的控制元素背景的方法。`background` 可以一次性设置所有背景属性，包括颜色、图片、位置和重复方式。`background-attachment` 控制背景图片是否固定，`background-color` 设置背景色，`...
本篇将详细解释四个案例中涉及的CSS背景属性及其用法。 案例1：设置背景大小 在这个案例中，通过`background-size`属性，我们可以控制背景图像的大小。`background-size: cover;`使得背景图片自动调整大小以完全...
在网页设计中，为了优化页面加载速度和提升用户体验，经常使用CSS背景属性来代替`<img>`标签的`src`属性来展示图片。这种方法的主要优势在于可以更好地控制图片的显示方式，避免直接在HTML中嵌入图片导致的额外HTTP...
这篇“CSS背景全攻略”深入探讨了CSS背景属性的各个方面，包括基本用法、技巧以及CSS3的新特性。 首先，CSS2中的背景属性由五个核心部分组成： 1. `background-color`：这个属性用于设置元素的背景颜色。你可以...
CSS背景属性是CSS中最重要的属性之一，它控制着元素的背景样式。以下是CSS背景属性的详细介绍： 1. background：简写属性，作用是将背景属性设置在一个声明中。 2. background-attachment：背景图像是否固定或者...
### CSS 背景属性（Background） 背景属性包括`background-color`、`background-image`、`background-repeat`、`background-position`和`background-attachment`等。`background-color`用于设置元素的背景色；`...
2. CSS背景属性（Background）： - background：一次性设置背景颜色、图像、位置、重复方式、裁剪区域和尺寸。 - background-attachment：设置背景图像是随内容滚动还是固定。 - background-color：设定元素的...
总之，“布纹背景CSS创意模板”是一种结合了布纹纹理和CSS技术的网页设计概念，通过巧妙运用CSS背景属性和模板化思想，为网页带来了独特的视觉效果和用户交互体验。在实际开发中，开发者可以根据需求调整这些模板，...
通过学习和掌握这些CSS背景属性，你将能为你的网页创建各种丰富的视觉效果，提升用户体验。《CSS背景》教程旨在帮助初学者和进阶者更好地理解和运用这些技巧，打造更具吸引力的网页设计。记得实践并不断尝试新的创意...
#### 一、CSS背景属性（Background） **背景属性**是CSS中非常重要的一部分，用于控制元素的背景效果。这些属性能够帮助设计师创建丰富多彩且具有视觉吸引力的网页。 - **background**: 该属性允许在一个声明中...
在CSS中，我们可以使用单一的`background`属性来设置多个背景属性，如颜色、图像、重复方式、定位和混合模式等。背景缩写可以简化代码，提高效率。例如： ```css background: color image position/repeat/size ...
CSS背景属性还包括`background-repeat`（控制图像是否及如何重复），`background-position`（设置图像的位置），以及`background-size`（调整图像大小），`background-attachment`（决定背景图像是否随滚动条移动）...
**CSS 背景属性 (Background)** 1. **background**: 这是一个简写属性，用于设置所有背景属性，如颜色、图像、位置、重复等。 2. **background-attachment**: 设置背景图是否固定或随页面滚动，值可以是`scroll`...