第9讲_使用CSS样式表设置背景颜色与图像
- 格式：ppt
- 大小：1.97 MB
- 文档页数：17
下载文档原格式
合集下载
CSS的样式PPT课件
知识点精讲
知识点分析 CSS文字样式的常用属性 设置字体： 基本语法为font-family:字体1，字体2，字体3。 例如：h1{font-family:宋体，楷体，隶书;}。 设置文字大小 基本语法为font-size:尺寸|百分比|关键字。 设置斜体 基本语法为font-style:normal|italic|oblique。 设置文字粗细 基本语法为font-weight:normal|bold|bolder|lighter|number。 设置变体 基本语法为font-variant:normal|small-caps。
网站建设与管理
CSS的样式
考纲解读
1 掌握CSS的基础知识。 2 掌握CSS的属性。
考点解读
重难点分析：CSS样式表、样式选择器及CSS的属性。
知识点精讲
知识点1 CSS的基础知识 例题精讲 请输入正确的代码
【解析】外部链接样式表的声明方法为<link rel=″stylesheet″ type=″text/css″ href=″样式 表文件的地址″>
知识点精讲
巩固提高
在Dreamweaver软件中，给网站首页设置“页面属性”的具体要求如下:
网站首页中文字大小设置为12 px，文字颜色设置为“#000”。
设置网页背景颜色为“#CCC”。 设置“链接（CSS） ”中“下划线样式”为“始终无下划线”。 设置“链接（CSS）”中“链接颜色”为“#000”。 下面是网站首页的部分源代码，请从选项A~N中将正确的内容填入相应位置。
知识点精讲
CSS段落和其他文字样式属性 修饰文字 基本语法为text-decoration:underline|overline|line-through|blink|none。 设置段落的水平对齐方式 基本语法为text-align:left|right|left|justify。 颜色及背景 设置文字颜色 基本语法为color：颜色的名称|RGB值|十六进制数。 设置背景 基本语法为background:背景颜色|背景图像|背景重复|背景附件|背景位置。 设置背景颜色属性 基本语法为background-color:颜色|transparent（透明）。 设置背景图像属性 基本语法为background-image:url（背景图片的路径和名称）。
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属性，可以实现各种背景样式的显示效果，例如渐变背景、带有背景图片的背景等等。
css3实现背景图片颜色修改的多种方式
css3实现背景图⽚颜⾊修改的多种⽅式css3可以改变图⽚的颜⾊了。
从此再也不⽤设计出多张图，⽽且随时可以修改。
下⾯就简单介绍下css3中是如何做到改变背景图⽚的颜⾊效果的。
⽅式⼀：利⽤css3滤镜filter中的 drop-shadow代码如下：<style>.icon{display: inline-block;width: 180px;height: 180px;background: url('img/XXX.png') no-repeat center cover;overflow: hidden;}.icon:after{content: '';display: block;height: 100%;transform: translateX(-100%);background: inherit;filter: drop-shadow(144px 0 0 #fff); //需要修改的颜⾊值}</style><i class="icon"></i>说明：drop-shadow 滤镜可以给元素或图⽚⾮透明区域添加投影将背景透明的 PNG 图标施加⼀个不带模糊的投影，就等同于⽣成了另外⼀个颜⾊的图标再通过 overflow:hidden 和位移处理将原图标隐藏mix-blend-mode 取值情况：【除了最后3个，⼤体和ps效果⼀样】mix-blend-mode: normal; // 正常mix-blend-mode: multiply; // 正⽚叠底mix-blend-mode: screen; // 滤⾊mix-blend-mode: overlay; // 叠加mix-blend-mode: darken; // 变暗mix-blend-mode: lighten; // 变亮mix-blend-mode: color-dodge; // 颜⾊减淡mix-blend-mode: color-burn; // 颜⾊加深mix-blend-mode: hard-light; // 强光mix-blend-mode: soft-light; // 柔光mix-blend-mode: difference; // 差值mix-blend-mode: exclusion; // 排除mix-blend-mode: hue; // ⾊相mix-blend-mode: saturation; // 饱和度mix-blend-mode: color; // 颜⾊mix-blend-mode: luminosity; // 亮度mix-blend-mode: initial; // 默认mix-blend-mode: inherit; // 继承mix-blend-mode: unset; // 还原⽅式⼆：利⽤css3的mix-blend-mode 和 background-blend-mode代码如下：<style>.icon{display: inline-block;width: 180px;height: 180px;background-image: url($'img/XXX.png'), linear-gradient(#f00, #f00);background-blend-mode: lighten;background-size: cover;}</style><i class="icon"></i>说明：lighten这个混合模式：变亮、变亮模式与变暗模式产⽣的效果相反，⿊⾊⽐任何颜⾊都要暗，所以⿊⾊会被任何⾊替换掉。
网页设计与制作案例教程(HTML5+CSS3)第5章使用CSS设置图像样式
规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。
默认。背景颜色为透明。 规定应该从父元素继承 background-color 属性的设置。
WEB
32
5.4 知识库：CSS背景样式
5.4.2 背景图像样式
第5章 使用CSS 设置图像样式
5.1 基础项目1：制作“李彦宏——众里寻他千百 度”网页 5.2 知识库：CSS图像样式
目录
5.3 基础项目2：制作“少年中国说”网页 5.4 知识库：CSS背景样式 5.5 提高项目：制作“低碳生活 从我做起”网页 5.6 拓展项目：制作“春节民俗”网页
WEB
2
background-color属性可用于设置图像或其它网页元素的背景颜色。其可 能的属性值如下：
属性值
color_name hex_number
描述
规定颜色值为颜色名称的背景颜色（比如 red）。 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
rgb_number
transparent inherit
name属性或id属性相关联，创建图像与映射之间的联系。具体
是name属性还是id属性由浏览器决定，所以应同时向<map>标 签添加name和id两个属性。
5.2.3 图像映射
<area>标签永远嵌套在<map>标签内部。<area>标签 定义图像映射中的区域，其属性及属性值如下：
必需的属性 属性 alt 属性 coords href nohref shape 值 text 描述 定义此区域的替换文本。
效果
5.2.2 CSS常用图像样式
提示： 当vertical-align的值为bottom或者sub时，IE与Firefox 的显示结果是不一样的，它们无所谓谁对谁错。在工作中，建 议尽量少地使用浏览器间显示效果不一样的属性值。
如何设置页面背景颜色
如何设置页面背景颜色在网页设计中，页面背景颜色是一个重要的元素。
通过设置页面背景颜色，我们可以为用户呈现出不同的氛围和风格。
本文将介绍一些常见的方法来设置页面背景颜色，帮助您打造出美观舒适的网页。
一、使用内联样式设置页面背景颜色使用内联样式表是一种简单快捷的方法来设置页面背景颜色。
您可以直接在网页标签中添加style属性，并设置背景颜色的数值或颜色名称。
例如：```html<body style="background-color: #F0F0F0;"><!-- 网页内容 --></body>```通过设置background-color属性的值，可以将页面背景颜色设置为特定的十六进制颜色码，如#F0F0F0，或使用颜色名称，如"white"。
根据需要调整数值或颜色名称来实现您想要的背景颜色效果。
二、使用CSS样式表设置页面背景颜色除了内联样式表，您还可以使用外部CSS样式表来设置页面背景颜色。
首先，您需要创建一个新的CSS文件（例如style.css），然后在HTML文件的头部引用该文件。
接下来，在CSS文件中添加如下代码：```cssbody {background-color: #F0F0F0;}```通过将背景颜色规则应用于body元素，您可以全局设置整个网页的背景颜色。
同样，您可以根据需求调整背景颜色的数值或颜色名称。
三、使用背景图片作为页面背景除了纯色背景，您还可以使用图片作为页面背景。
这样可以为网页增添一些视觉元素和艺术感。
要设置背景图片，可以使用以下CSS规则：```cssbody {background-image: url("background.jpg");background-repeat: no-repeat;background-size: cover;}```在上述代码中，我们通过background-image属性指定了背景图片的URL。
第9章 CSS样式表
9.3 实例——使用CSS样式控制页面
把外部CSS样式表链接到页面
CSS样式表文件与网页文件的关系
9.3 实例——使用CSS样式控制页面
操作步骤:
– 打开未设置样式的主页文件 – 打开CSS样式面板，单击面板下方的（附加样式表）按钮，打开如下
图所示“链接外部样式表”对话框，单击“浏览”按钮，打开如下图 所示对话框，选择CSS文件夹中的wenzi.css和font.css进行链接，网 页中相应的样式即发生改变
9.3 实例——使用CSS样式控制页面
9.3 实例——使用CSS样式控制页面
– 采用上述方法定义biankuang的CSS规则，参数设置如下图所 示
9.3 实例——使用CSS样式控制页面
9.3 实例——使用CSS样式控制页面
– 采用上述方法定义bankuai的CSS规则，参数设置如下图所示
9.3 实例——使用CSS样式控制页面
9.4 DIV+CSS布局
–单击【确定】按钮，完成Body标签样式的定义 –定义#container容器。单击“CSS样式”面板右下角的“新建样式” 按钮，弹出“新建CSS规则”对话框，设置参数如下图所示。
9.4 DIV+CSS布局
–单击【确定】按钮，打开“#container的CSS规则定义”对话框，设 置参数如下图所示
“插入Div标签”对话框
9.4 DIV+CSS布局
插入DIV标签
–在页面中单击，执行“插入”|“布局对象”|“Div标签”命令， 弹出“插入Div标签”对话框，在“插入”栏中选择“在插入 点”，在“ID”栏中选择“container”样式，如下图所示
“插入Div标签”对话框
9.4 DIV+CSS布局
9.第2章：CSS样式表与模板(4)
理论课授课教案
课
程
名
称
组装与维护
第2章：CSS样式表与模板（4）
第3节：对图像运用CSS滤镜：图片滤镜
审批签字
授课时间
月日
授课班级
2010计算机班
计划课时
2课时
实用课时
17--18
教学目的与要求
1.掌握基本概念：图片滤镜
授课类型
理论课
教学方法
讲授法
教具
2）全部相同：将相同的边框样式属性设置应用于元素的“上”“右”“下”和“左”侧。取消选择“全部相同”可设置元素各个边的边框样式。
3）宽度：设置元素边框的粗细。
小结、作业及课后回顾5分钟
小结
本节主要讲述了在网页中对图像运用CSS滤镜的过程。
作业
巩固本次课所学知识
课后
教学
回顾
点名，课程介绍5分钟。
讲授新课
80分钟
教学过程和内容
时间分配
1）单词间距：设置单词的间距。
2）字母间距：增加或减小字母或字符的间距。
3）垂直对齐：指定应用它的元素的垂直对齐方式。
4）文本对齐：设置元素中的文本对齐方式。
5）文本缩进：指定第一行文本缩进的程度。
2.接下来设置方框样式。方框样式定义特定元素的大小及其周围元素间距等属性。在CSS样式定义对话框的左边选择“盒子”，然后再右侧详细设置方框样式。
一、基本概念
CSS不仅可以对文字进行样式的修改，还可以对表格进行修改。
1.区块样式的修改2.方框样式的修改3.边框样式的修改
二、上机操作
1.首先介绍如何设置区块样式。区块样式主要定义段落文本中文字的字距、对齐方式等格式。在CSS样式定义对话框左边选择“区块”选项，然后再右边选项区域详细设置区块样式即可。
课
程
名
称
组装与维护
第2章：CSS样式表与模板（4）
第3节：对图像运用CSS滤镜：图片滤镜
审批签字
授课时间
月日
授课班级
2010计算机班
计划课时
2课时
实用课时
17--18
教学目的与要求
1.掌握基本概念：图片滤镜
授课类型
理论课
教学方法
讲授法
教具
2）全部相同：将相同的边框样式属性设置应用于元素的“上”“右”“下”和“左”侧。取消选择“全部相同”可设置元素各个边的边框样式。
3）宽度：设置元素边框的粗细。
小结、作业及课后回顾5分钟
小结
本节主要讲述了在网页中对图像运用CSS滤镜的过程。
作业
巩固本次课所学知识
课后
教学
回顾
点名，课程介绍5分钟。
讲授新课
80分钟
教学过程和内容
时间分配
1）单词间距：设置单词的间距。
2）字母间距：增加或减小字母或字符的间距。
3）垂直对齐：指定应用它的元素的垂直对齐方式。
4）文本对齐：设置元素中的文本对齐方式。
5）文本缩进：指定第一行文本缩进的程度。
2.接下来设置方框样式。方框样式定义特定元素的大小及其周围元素间距等属性。在CSS样式定义对话框的左边选择“盒子”，然后再右侧详细设置方框样式。
一、基本概念
CSS不仅可以对文字进行样式的修改，还可以对表格进行修改。
1.区块样式的修改2.方框样式的修改3.边框样式的修改
二、上机操作
1.首先介绍如何设置区块样式。区块样式主要定义段落文本中文字的字距、对齐方式等格式。在CSS样式定义对话框左边选择“区块”选项，然后再右边选项区域详细设置区块样式即可。
CSS常用样式属性大全
CSS常用样式属性大全1. 文本属性- `color`：设置文本颜色- `font-size`：设置字体大小- `font-family`：设置字体系列- `font-weight`：设置字体粗细- `text-align`：设置文本对齐方式- `text-decoration`：设置文本装饰（如下划线、删除线等）- `text-transform`：设置文本大小写转换2. 背景属性- `background-color`：设置背景颜色- `background-image`：设置背景图片- `background-repeat`：设置背景图片的重复方式- `background-position`：设置背景图片的位置- `background-size`：设置背景图片的尺寸3. 边框属性- `border`：设置元素边框样式、宽度和颜色- `border-radius`：设置元素边框的圆角- `border-color`：设置元素边框的颜色- `border-width`：设置元素边框的宽度4. 布局属性- `display`：设置元素的显示方式（如块级、内联等）- `width`：设置元素的宽度- `height`：设置元素的高度- `margin`：设置元素外边距- `padding`：设置元素内边距- `float`：设置元素的浮动方式5. 盒模型属性- `box-sizing`：设置元素的盒模型计算方式- `overflow`：设置元素溢出内容的处理方式- `position`：设置元素的定位方式- `top`：设置定位元素的上边距- `bottom`：设置定位元素的下边距- `left`：设置定位元素的左边距- `right`：设置定位元素的右边距以上是CSS中常用的样式属性，通过合理使用这些属性可以实现各种各样的页面效果。
在编写CSS代码时，建议将样式属性单独分行展示，以增加代码的可读性和维护性。
excel中的css样式
excel中的css样式让我们来看一下如何使用CSS样式来调整表格的背景颜色。
在Excel中，我们可以通过选择单元格或整个表格，然后在“格式”选项卡中选择“填充色”来调整背景颜色。
我们可以选择预设的颜色，也可以使用RGB值来自定义颜色。
通过调整背景颜色，我们可以使表格更加醒目和易于区分。
除了背景颜色，我们还可以使用CSS样式来调整表格中文字的字体样式。
在Excel中，我们可以通过选择单元格或整个表格，然后在“格式”选项卡中选择“字体”来调整字体样式。
我们可以选择字体、字号、加粗、斜体等选项，以适应不同的需求。
通过调整字体样式，我们可以使表格中的文字更加清晰和易于阅读。
我们还可以使用CSS样式来调整表格的边框样式。
在Excel中，我们可以通过选择单元格或整个表格，然后在“格式”选项卡中选择“边框”来调整边框样式。
我们可以选择边框的粗细、颜色和线型，以及是否显示特定的边框。
通过调整边框样式，我们可以使表格更加整洁和有条理。
除了上述介绍的基本样式调整外，Excel还提供了一些高级的CSS 样式功能，例如条件格式。
通过条件格式，我们可以根据特定的条件来自动调整单元格的样式。
例如，我们可以设置当某个单元格的数值大于某个阈值时，将其背景颜色调整为红色，以提醒用户注意。
条件格式功能可以使表格中的数据更加直观和易于分析。
Excel还提供了一些特殊的样式调整功能，例如数据条和图标集。
通过使用数据条，我们可以将数值大小以不同长度的条形图的形式显示在单元格中，以便比较和分析。
而使用图标集，我们可以根据特定的数值范围，在单元格中显示相应的图标，以便直观地表示数据的状态。
这些特殊的样式调整功能可以使表格更加生动和易于理解。
Excel中的CSS样式可以帮助我们调整表格和单元格的外观，使其更加美观和专业。
通过调整背景颜色、字体样式、边框样式等，我们可以使表格更加醒目和易于阅读。
同时，通过条件格式、数据条和图标集等高级功能，我们可以进一步提升表格的可视化效果和分析能力。
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的具体样式设置
图4.33ቤተ መጻሕፍቲ ባይዱ水平位置
图4.34 垂直位置
1.3 区块样式设置
“区块”设置可以定义标签和属性的间距和对齐，通常适用于整段 的文本和表格的单元格。在“背景样式设置”的网页文件中本书 创建了名为“.test”的样式表用来设置区块样式，在“CSS样式 定义”对话框“分类”列表中选择“区块”，如图4.35所示。
宽度：设置元素四个方向边框的粗细，预设值有“粗”、“中”、 “细”，也可以手工设置值。设置后的效果如图4.42所示。两种 浏览器都支持“宽度”属性。
全部相同：将相同的边框宽度设置的“上”、“右”、“下”和 “左”侧，取消选择“全部相同”可设置元素各个边的边框宽度。
颜色：设置边框的颜色。可以分别设置每个边的颜色，但显示取 决于浏览器。
图4.31 背景样式设置
图4.32 固定背景样式应用
图4.32中<body>部分使用了“test”样式，背景样式设置正如图4.31所 示，其中背景图片不会随着网页的滚动而滚动，而会保持相对固定的 位置。
主要设置如下。
背景颜色：通过选色器选择一种颜色作为背景色。
背景图像：通过浏览按钮选择作为背景的图像。
• 本章实例设置中test1样式设置为绝对定位，test2设置为相对定 位，其余设置一样。图4.47显示了绝对和相对效果，第一段文本 为绝对定位，不受前面分段符<p>的影响，第二段文本是相对定位， 受分段符<p>的影响，浏览器效果如图4.48所示。
图4.47 类型设置对比
图4.48 浏览器中的对比效果
图4.28 字体大小设置 图4.29 字体样式
行高：类似于Word中的行距的概念，选项包括“自动”和 “（值）”，“自动”是计算机自动调整行高，“（值）”是设 计者用数值和单位进行具体设置，比较直观的写法是用百分比， 例如180%是指行高等于文字大小的1.8倍。如字体为14pt，要 设置行距为2倍行距，则行高的值应该是28pt，对比图如4.30所 示，上面两行是设置了行距的CSS样式应用效果，下面两行是没 有设置CSS样式。
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）
3
border-image-slice
规定图像边框的向内偏移。
3
border-image-source
规定用作边框的图片。
3
border-image-width
规定图片边框的宽度。
3
border-radius
简写属性，设置所有四个border-*-radius属性。
3
border-top-left-radius
定义边框右下角的形状。
3
border-image
简写属性，设置所有border-image-*属性。
3
border-image-outset
规定边框图像区域超出边框的量。
3
border-image-repeat
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
1
background-color
设置元素的背景颜色。
1
background-image
设置元素的背景图像。
1
background-position
设置背景图像的开始位置。
1
background-repeat
设置是否及如何重复背景图像。
1
background-clip
规定背景的绘制区域。
3
background-origin
background-attachment
background-position
背景色
background‐color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中:
属性
描述
CSS
background
在一个声明中设置所有的背景属性。
border-image-slice
规定图像边框的向内偏移。
3
border-image-source
规定用作边框的图片。
3
border-image-width
规定图片边框的宽度。
3
border-radius
简写属性，设置所有四个border-*-radius属性。
3
border-top-left-radius
定义边框右下角的形状。
3
border-image
简写属性，设置所有border-image-*属性。
3
border-image-outset
规定边框图像区域超出边框的量。
3
border-image-repeat
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
1
background-color
设置元素的背景颜色。
1
background-image
设置元素的背景图像。
1
background-position
设置背景图像的开始位置。
1
background-repeat
设置是否及如何重复背景图像。
1
background-clip
规定背景的绘制区域。
3
background-origin
background-attachment
background-position
背景色
background‐color 属性定义了元素的背景颜色. 页面的背景颜色使用在body的选择器中:
属性
描述
CSS
background
在一个声明中设置所有的背景属性。
CSS颜色与背景
颜色与背景本文，你将学习如何在网站上应用颜色与背景。
我们还会介绍用于定位和控制背景图像的高级方法。
本课将对下列CSS属性进行讲解：∙color∙background-color∙background-image∙background-repeat∙background-attachment∙background-position∙background前景色：‘color’属性CSS属性color用于指定元素的前景色。
例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。
h1 {color: #ff0000;}∙显示示例颜色值可以用十六进制表示（比如上例中的#ff0000），也可以用颜色名称（比如“red”）或RGB值（比如rgb(255,0,0)）表示。
‘background-color’属性CSS属性background-color用于指定元素的背景色。
因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。
你也可以为其他包含标题或文本的元素单独应用背景色。
在下例中，我们为body和h1元素分别应用了不同的背景色。
body {background-color: #FFCC66;}h1 {color: #990000;background-color: #FC9804;}显示示例注意：我们为h1元素应用了两个CSS属性，它们之间以分号（“;”）分隔。
背景图像[background-image]CSS属性background-image用于设置背景图像。
在下面的示例中，我们使用了一张蝴蝶的图像作为背景。
你可以将该图片下载下来（方法为：鼠标右击该图片，然后选择“图片另存为”），以便在自己的计算机上使用。
当然，你也可以选用其他你觉得满意的图片。
css背景和边框标签实例详解
css背景和边框标签实例详解⼀、css背景标签1，设置背景颜⾊back-ground-color 属性指定元素的背景⾊。
⼩实例如下图所⽰：运⾏结果如下：可以通过选择器给不同的标签设置不同的颜⾊，在这⾥h1,div,和p标签将拥有不同的背景⾊：实例：运⾏结果如下图所⽰：2.设置背景图像background-image属性指定⽤作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。
⽤url来引⼊外部图⽚。
具体实例如下所⽰：运⾏结果如下图：注意事项：使⽤背景图⽚时，要注意背景图⽚的样式，不要有⼲扰到⽂本的图像，以免影响效果。
css背景重复的问题默认情况下，background-repeat属性在垂直和⽔平⽅向上都重复图像。
某些图像应只适合⽔平或垂直⽅向上重复，若想仅在⽔平⽅向上重复，需要⽤（background-repeat：repeat-x；），则背景看起来更好；若想要仅在垂直重复图像，需设置background-repeat：repeat-y；属性还可以指定只显⽰⼀次背景图像：⽤background-repeat：no-repeat标签即可。
4、指定背景图像的位置指定背景图像的位置需要使⽤background-position标签具体实例如下图所⽰：下⾯将会展⽰把背景图⽚放在右上⾓的代码：运⾏结果如下图所⽰：5、设置背景图像固定background-attachment 属性来设置背景图像固定，其属性值scroll图像随页⾯元素⼀起滚动（默认值），fixed图像固定在屏幕上，不随页⾯元素滚动。
6、设置背景图像⼤⼩background-size 属性可以设置背景图像的⾼度和宽度。
第⼀个值设置宽度，第⼆个值设置⾼度。
如果设⼀个值，则第⼆个值会默认auto。
其格式如下所⽰：background-size：属性1 属性2；实例如下：运⾏结果如下：7、设置图像透明效果使⽤opacity属性能够使任何元素能够使任何元素呈现出透明效果，透明度在0~1之间，其格式如下：opacity：opacityValue；⼆、css边框标签1.设置边框颜⾊（1）设置边框样式（border-style）边框样式⽤于定义边框的风格，常⽤属性值如下：none：没有边框即忽略所有边框的宽度（默认值）。
通过css使用background-color为背景图添加遮罩效果的两种方法
通过css使⽤background-color为背景图添加遮罩效果的两种⽅法⼀个div同时设置background-color和background-image的话，color是处于img层下⽅的，⽆法实现遮罩效果，所以需要再创建⼀个div作为其⼦div,然后设置⼦div的背景颜⾊，介绍两种⽅法：第⼀种，代码如下：css:.wrap{position: relative;background: url(i/pic4.jpg) no-repeat;-webkit-background-size: 100%;background-size: 100%;}.warp-mask{height:100%;width:100%;background: rgba(0,0,0,.4);}html:<div class="wrap"><div class="wrap-mask"></div></div>第⼆种，通过after伪元素设置，代码如下：css:.wrap{position: relative;background: url(i/pic4.jpg) no-repeat;-webkit-background-size: 100%;background-size: 100%;}.wrap-mask:after{position: absolute;top: 0;left: 0;content: "";background-color: yellow;opacity: 0.2;z-index: 1;width: 100%;height: 100%;}html:<div class="wrap"><div class="wrap-mask"></div></div>总结以上所述是⼩编给⼤家介绍的通过css使⽤background-color为背景图添加遮罩效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。
CSS 设置色彩属性
CSS 设置色彩属性任何美观的网页都离不开背景的修饰，以及丰富的色彩。
没有色彩的网页是没有生机的，这就意味着一个优秀的网页设计者不仅要能够合理的安排页面布局，而且还要具有一定的色彩视觉和色彩的搭配能力，这样才能够使网页更加精美也具表现力，并给浏览者以亲切感。
现在，依赖CSS 的强大功能，能够为页面增加在更加多样的色彩及背景选择。
并且能够统一页面元素的色彩配置。
1、color 属性任何一个页面元素都具有color 属性，该属性用于设置前景色，并且常用来设置页面元素的字体颜色。
该属性的基本语法如下所示：该属性的初始值由浏览器决定。
color 属性值就可以使用下面三种设定方式：第一种是直接使用CSS 中预置的标准色名称，如red 、blue 等；第二种是使用十六进制颜色，如#FF0000、#0000FF 等；第三种是使用RGB 颜色，如RGB(255,0,0)、R GB(0,0,255)等。
2、背景属性通过设置背景来美化页面，常用的背景属性有：background-color 属性、backgr ound-image 属性、background-repeat 属性、background-position 属性、background-at tachment 属性和background 属性。
为transparent (透明)。
同color 属性一样，background-color 属性接受，而对于没有设定背景色的标记，采用透明（tranaparent ）背景。
背景颜色属性设定一个元素的背景颜色。
例如:为了避免与用户的样式表之间的冲突，无论任何背景颜色被使用的时候，背景图像都应该被指定。
而大多数情况下，background-image: none 都是合适的。
网页为了避免与用户的样式表之间的冲突，背景和颜色属性应该始终一起指定。
制作者也可以使用略写的背景属性，通常会比背景颜色属性获得更好的支持。
（2）background-image 属性用于设定标记的背景图片，通常情况下，在标记<body>中应用，将图片用于整个主体中。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
案例演示3
案例演示4
背景图片的位置
查看源代码
发现：无论网页如何拉伸，楼房的背景图片一直处于页面的 右下角，那么将如何设置呢？
添加多个背景图片
由于在CSS中，一个标记只能使用一次background属性， 若想添加多个背景，只有给多个标记添加不同背景来实现
查看源代码
背景样式的缩写
background-color:blue; background-image:url(bg1.jpg); background-repeat:repeat-y; background-attachment:fixed; background-position:5px 10px;
背景综合一：我的个人主页
查看源代码
背景综合二：古词《念奴娇· 赤壁怀古》 查看源代码
千里之行 始于足下
17
常用的浅色案例
一般来说，网页的背景色应该柔和一些、素一些、淡一些， 再配上深色的文字，使人看起来自然、舒畅。而为了追求醒 目的视觉效果，可以为标题使用较深的颜色。
网页颜色原理和象征意义
我们所有网页上颜色，在HTML下看到的是以颜色英文单词 或者十六进制的表示方法（如#000000表示为黑色）。不 红色---是一种激奋的色彩。刺激效果，能使人产生冲动，愤 怒，热情，活力的感觉。 同的颜色有着不同的含义，给人各种丰富的感觉和联想。
绿色---介于冷暖两中色彩的中间，显得和睦，宁静，健康， 安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的 气氛。 橙色---也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨， 时尚的效果。 黄色---具有快乐，希望，智慧和轻快的个性，它的明度最 高。 蓝色---是最具凉爽，清新，专业的色彩。它和白色混合，能 体现柔顺，淡雅，浪漫的气氛(象天空的色彩)
白色---具有洁白，明快，纯真，清洁的感受。 黑色---具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色---具有中庸，平凡，温和，谦让，中立和高雅的感觉。
网页颜色的使用风格
案例演示
1、 公司色 在现在企业中，公司的CI形象显得尤其重要，每一个公司的CI设计必然要 有标准的颜色。比如新浪网的主色调是一种介于浅黄和深黄之间的颜色，同 时形象宣传、海报、广告使用的颜色都和网站的颜色一致。再比如国富投资 公司的主色调是C：100%，M：60%，Y：0%，K：0%。这样的颜色使用到网 站上显得色调自然、底蕴深厚。 2、 风格色 许多网站使用颜色秉承的是公司的风格。比如海尔使用的颜色是一种中 性的绿色，即充满朝气有不失自己的创新精神。女性网站使用粉红色的较多 ，大公司使用蓝色的较多……这些都是在突出自己的风格。 3、 习惯色 这些网站的颜色使用很大一部分是凭自己的个人爱好，以个人网站较多 使用，比如自己喜欢红色、紫色、黑色等，在做网站的时候就倾向于这种颜 色。每一个人都有自己喜欢的颜色，因此这种类型称为习惯色。
background:blue url(bg1.jpg) repeat-y fixed 5px 10px; 严格来说没什么顺序之分，但推荐一定的次序有利于代码修改和阅 读：颜色、背景图片、是否重复、是否固定、如何定位
标题的图像替换
Байду номын сангаас
素材准备
参考代码
滑动门技术的标题
参考代码
效果：我们看到上述两行，背景图片可长可短，就像滑动门似的。 用途：常用于标题或导航。
回顾
CSS中如何设置图片代替文本？ 图文混排中，使用哪个CSS属性可以实现？ CSS中剪切图片的思路是如何呢？
本讲目标
背景颜色给页面分块 背景图片的设置 背景图像替换
滑动门技术的标题
背景综合一：我的个人主页
背景综合二：古词《念奴娇· 赤壁怀古》
新知识导入
对于做网页的初学者可能更习惯于使用一些 漂亮的图片作为自己网页的背景。 但是，浏览一下大型的商业网站，你会发现 他们更多运用的是白色、蓝色、黄色等，使得网 页显得典雅，大方和温馨。更重要的是，这样可 以大大加快浏览者打开网页的速度。
背景色给页面分块
查看源代码
背景图片的重复
使用CSS为页面添加背景图片的方法，使用属性 background-image
background-image:url(bg1.jpg); background-repeat:repeat-y; /* 背景图片 */ /* 垂直方向重复 */
案例演示1
案例演示2