全部章节   >>>>

本章目录

6.1 背景属性

6.1.1 背景颜色

6.1.2 背景图片

6.1.3  背景图片的重复方式

6.2 背景图片的定位

6.2.1 background-position 属性

6.2.2 CSS Sprites

6.3 背景的渐变

6.3.1 线性渐变

6.3.2 径向渐变

6.4 阴影属性

6.4.1 文字阴影

6.4.2 盒子阴影

总结：

6.1 背景属性

一般可以通过设置页面元素的背景颜色或背景图片，来实现网页整体丰富的视觉效果。CSS3中提供以下几种背景样式属性来方便设置背景样式。

属性

说明

background-color

用于设置元素的背景颜色

background-image

用于设置元素的背景图片

background-repeat

用于设置元素的背景图片重复方式

background-position

用于设置元素的背景图片位置

background-size

用于设置元素的背景图片大小

background

复合属性，用于设置元素的背景效果

6.1.1 背景颜色

一般情况下，常规的页面都会使用背景颜色来突出其基调，通过样式属性 background-color 设置元素的背景颜色。

在使用background-color属性时，取值可以是颜色关键字，如 red 表示红色；也可以是 RGB（红、绿、蓝），如 RGB(255/0/0) 表示红色；还可以是十六进制的数字，如 #ff0000 表示红色。

示例：

#menu ul li {

	......

	background-color: #EBEBEB;

	margin-bottom: 1px;

}

#menu ul li:hover {

	background-color: #CDCBCB;

}

#EBEBEB  默认情况下，背景颜色为浅灰色

#CDCBCB  鼠标经过时，背景颜色为灰色

6.1.2 背景图片

网页的背景可以通过 CSS 中的 background-image 属性可以设置标签的背景图片，在使用该属性时，取值可以为所设置图片的 URL。

语法：

background-image: url(图片的url)

在设置元素背景图像的同时设定元素的背景颜色，浏览器会优先显示背景图片，当浏览器不能载入图片时，则显示背景颜色。

示例：

<body>

	<div id="adv">

	<ul>

		<li><a href="#">1. 品质电脑 放心优选 </a></li>

		<li><a href="#">2. 数码优选爆款低至 9.9 元 </a></li>

		<li><a href="#">3.【0 元试用】白占便宜 </a></li>

		<li><a href="#">4. 出游装备低至 17.9</a></li>

	</ul>

	</div>

</body>


<style type="text/css">

	*{padding:0px;margin:0px;}

	#adv{

		width:400px;

		height:170px;

		background-image:url(Images/bg.jpg);

		border:5px solid black;

	}

	#adv ul{list-style:none;padding-left:180px; padding-top:30px;}

	#adv ul li{line-height:25px;height:25px;}

	#adv ul li a{font-size:12px;color:white;text-decoration:none;font-family:"微软雅黑";}

</style>

6.1.3  背景图片的重复方式

默认情况下，背景图片会以元素左上角为起点，沿水平和垂直方向重复出现，最终填满整个区域。设置背景图片平铺可以使用 background-repeat 属性来控制。

语法：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数

说明

repeat

默认值，表示背景图像在纵向和横向上平铺

no-repeat

表示背景图像不平铺

repeat-x

表示背景图像只在水平方向上平铺

repeat-y

表示背景图像只在垂直方向上平铺

示例：

<body>

	<div id="calendar">

		<h1> 精美日历 </h1>

	</div>

</body>


<style type="text/css">

	#calendar{

		width:600px;height:300px;border:1px solid black;

		background-image:url(Images/hrepeat.jpg);

		background-repeat:repeat-x;

	}

	#calendar h1{

		text-align:center;margin-top:100px;

	}

</style>

background-repeat:repeat-x;  设置背景图片且水平平铺

6.2 背景图片的定位

6.2.1 background-position 属性

默认情况下，背景图片都是从设置了 background 属性的元素的左上角开始出现，可以通过 background-position 属性轻松地调整背景图片的位置

语法：

background-position: 关键字 | 百分比 | 像素值

取值

说明

关键字

水平方向：left、center、right；垂直方向：top、center、bottom。

百分比

使用百分比表示背景位置，常用的数值：

水平方向：0%（左） 50%（中） 100%(右)

垂直方向：0%（上） 50%（中） 100%(下)

像素值

背景图片左顶点相对于元素左顶点的偏移量，当为正值时，水平向右、垂直向下偏移，当为负值时，水平向左、垂直向上偏移。

示例1：

<body>

	<div id="container"></div>

</body>


<style type="text/css">

	#container{

		height:500px;

		width:500px;

		border:1px solid black;

		background-image:url(Images/p1.png),

		url(Images/p2.png),

		url(Images/p3.png),

		url(Images/p4.png),

		url(Images/p5.png);

		background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;

		background-position:right bottom,

		0% 100%,

		200px 200px,

		200px -50px,

		-50px 200px;

	}

</style>

在使用 background-position 属性的过程中，关键顺序不重要，left bottom 和 bottom left 意义相同。若只设置一个值时，第 1 个值代表水平偏移位置，第 2 个值默认为居中。

示例2：

<body>

	<div id="container">

		<ul>

			<li class="title">玩&nbsp;&nbsp;•&nbsp;&nbsp;新鲜</li>

			<li class="msg">联想拯救者Y7000</li>

			<li class="msg">新品Y神性能怪兽</li>

		</ul>

	</div>

</body>


<style type="text/css">

	*{padding:0px;margin:0px;}

	#container{

		width:400px;

		height:150px;

		font-family:"微软雅黑";

		background-color:#4967af;

		background-image:url(Images/p1.png);

		background-repeat:no-repeat;

		background-position:210px 15px;

	}

	#container ul{list-style:none; padding:20px;}

	#container ul li.title{color:white;border:2px solid white;width:80px;text-align:center;	}

	#container ul li.msg{color:white;font-size:12px;margin:15px 0px;

	}

</style>

6.2.2 CSS Sprites

CSS Sprites，在国内也称之为 CSS 精灵，是一种图片网页应用处理方式。它允许将一个页面涉及到的所有零星图片均包含到一张大图中。

其实，CSS Sprites 的目的是通过整合图片，减少对服务器的请求数量以及请求的字节数，从而加快页面的加载速度。

示例：

<body>

	<ul id="menu">

		<li class="titel_1">免输入</li>

		<li class="titel_2">更快</li>

		<li class="titel_3">更安全</li>

	</ul>

</body>


<style type="text/css">

* {padding: 0px;margin: 0px;}

#menu {list-style: none;}

#menu li {line-height: 26px;height: 26px;font-size: 12px;color: gray;width: 40px;

padding-left: 30px;

background-image: url(Images/qr-coagent.png);

background-repeat: no-repeat;

margin: 10px;

}

#menu li.titel_1 {background-position: 0px 0px;}

#menu li.titel_2 {background-position: 0px -26px;}

#menu li.titel_3 {background-position: 0px -52px;}

</style>

6.3 背景的渐变

渐变背景在 Web 页面中是一种常见的视觉元素。使用 CSS3 渐变可以在两种颜色间制造出平滑的渐变效果。用它代替图片，可以加快页面的载入时间、减小带宽占用。

CSS3定义了两种类型的渐变：线性渐变和径向渐变。

6.3.1 线性渐变

创建一个线性渐变需要设置一个起始点和一个方向（指定为一个角度）的渐变效果，还要定义终止色，终止色是平滑过渡后的颜色。n创建一个线性渐变需要设置一个起始点和一个方向（指定为一个角度）的渐变效果，还要定义终止色，终止色是平滑过渡后的颜色。

语法：

background: linear-gradient(<angle> || <direction>,< color_stop>, <color_stop>...);

取值

说明

<angle>

通过角度来确定渐变的方向。角度是指水平线和渐变线之间的角度，逆时针方向计算。

<direction>

通过代表方向的关键词来确定渐变的方向。

<color_stop>

用于指定终止色，其中可以设置多个终止色，用于实现多种颜色之间的渐变。

示例1：

	<div class="container">

		<h3>设置方向渐变</h3>

		<div id="gradients_1"></div>

	</div>

	<div class="container">

		<h3>设置角度渐变</h3>

		<div id="gradients_2"></div>

	</div>

	<div class="container">

		<h3>设置多种颜色渐变</h1>

		<div id="gradients_3"></div>

	</div>

	<div class="container">

		<h3>设置渐变的位置</h3>

		<div id="gradients_4"></div>

	</div>


div.container{float:left; padding:5px;}

div.container div{height:200px;	width:200px;}

#gradients_1{

	background:linear-gradient(to right,red,black);

}

#gradients_2{

	background:linear-gradient(60deg,red,black);

}

#gradients_3{

	background:linear-gradient(to right bottom,red,white,black);

}

#gradients_4{

	background:linear-gradient(to right bottom,red 40%,white 80%,black);

}

示例2：

<body>

	<div id="container"></div>

</body>


<style type="text/css">

	#container{

		height:133px;

		width:400px;

		background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,1)),url(Images/transparent.png);

	}

</style>

重复线性渐变

为了实现更为复杂的渐变效果，可以通过repeating-linear-gradient()创建一个由重复线性渐变组成的背景效果，类似linear-gradient函数，并且采用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器，因此称之为重复线性渐变。

示例：

<body>

	<div id="argentina">

		<p>阿根廷男子国家足球队</p>

	</div>

</body>


<style type="text/css">

	*{padding:0px;margin:0px;	}

	#argentina{

		height:380px;width:300px;

		border-radius:20px;

		background:url(Images/football.png) no-repeat center center,

                repeating-linear-gradient(to right,#43a1d5,#43a1d5 20px,#ffffff 20px,#ffffff 40px);

		font:bold 24px "微软雅黑";

		text-align:center;padding-top:10px;margin:0 auto;

		border:1px solid gray;

	}

</style>

第一个渐变效果：颜色从#43a1d至#43a1d5，位置从0px开始至20px结束

第二个渐变效果：颜色从#ffffff至#ffffff，位置从20px开始至40px结束

6.3.2 径向渐变

CSS3 径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。

语法：

background: radial-gradient (<shape> || <size> at <position>, <color_stop>, ...);

取值

说明

<position>

主要用来定义径向渐变的圆心位置。

<shape>

主要用来定义径向渐变的形状。包括两个值“circle”（圆形）和“ellipse”（椭圆形）。

<size>

主要用于设置渐变半径的大小，从而用来确定径向渐变的结束形状大小。可以设置数值、百分比以及关键字。

<color_stop>

径向渐变线上的终止色

示例：

<div class="container">

	<h3>简单径向渐变</h3>

	<div id="gradients_1"></div>

</div>

<div class="container">

	<h3>设置中心点的径向渐变</h3>

	<div id="gradients_2"></div>

</div>

<div class="container">

	<h3>设置渐变形状的径向渐变</h1>

	<div id="gradients_3"></div>

</div>

<div class="container">

	<h3>设置径向大小的径向渐变</h3>

	<div id="gradients_4"></div>

</div>


div.container{float:left;padding:5px;}

div.container div{height:150px;width:250px;}

#gradients_1{

	background:radial-gradient(black,white,red);

}

#gradients_2{

	background:radial-gradient(at right bottom,black,white,red);

}

#gradients_3{

	background:radial-gradient(circle at center,black,white,red);

}

#gradients_4{

	background:radial-gradient(300px 100px at 60% 40%,black,white,red);

}

#gradients_1  形状为椭圆形、圆心在元素的中心点，默认大小的径向渐变

#gradients_2  形状为椭圆形、圆心在元素的右下角，默认大小的径向渐变

#gradients_3  形状为圆形、圆心在元素的中心点，默认大小的径向渐变

#gradients_4  水平半径为300px、垂直半径100px，形状为椭圆形

重复径向渐变

在 CSS 中同样可以实现重复径向渐变效果，此时则需要使用 repeating-radial-gradient() 函数。

示例：

<body>

	<div id="container"></div>

</body>


<style type="text/css">

	#container{

	width: 262px;

	height: 262px;

        border-radius: 50%;

	margin:0 auto;

        background:

	radial-gradient(gray,gray 7px,#da5b33 7px,#da5b33 30px,gray 30px,gray 31px,#da5b33 31px,#da5b33 36px,transparent 36px),

	repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 4px, #2a2928 6px);

	}

</style>

第一层背景为中心圆盘，由于无任何规律，且显示为圆形，则可使用径向渐变实现，其渐变过程如下：

（1）第一个渐变效果：颜色从gray至gray，位置从0px开始至7px结束。

（2）第二个渐变效果：颜色从#da5b33至#da5b33，位置从7px开始至30px结束。

（3）第三个渐变效果：颜色从gray至gray，位置从30px开始至31px结束。

（4）第四个渐变效果：颜色从#da5b33至#da5b33，位置从31px开始至36px结束。

（5）从位置36px起，显示为transparent。

第二层背景为黑色唱片，通过观察，呈现效果存在规律，且显示为圆形，则可使用重复径向渐变实现，其渐变规律：

（1）第一个渐变效果：#2a2928至#2a2928，从0px开始至4px结束。

（2）第二个渐变效果：#ada9a0至灰白色#ada9a0，从4px开始至5结束。

（3）不断重复以上渐变效果。

6.4 阴影属性

6.4.1 文字阴影

在CSS3中，可以使用text-shadow属性对页面上的文字直接添加阴影效果。

语法：

text-shadow: text-shadow: h-shadow v-shadow blur color;

取值

说明

h-shadow

必需，阴影的水平距离。

v-shadow

必需，阴影的垂直距离。

blur

可选，阴影的模糊半径。

color

可选，阴影的颜色。

示例：

<body>

	<div id="adv">

		<p id="title">618 主会场 </p>

		<p id="msg"> 时尚跨店 2 件 7.5 折 </p>

	</div>

</body>


<style type="text/css">

......

#title {font: bold 54px " 微软雅黑 ";color: white;

text-shadow: 3px 3px 2px #ff379d;

}

#msg {

text-shadow:

2px 0px 3px #ff379d,

-2px 0px 3px #ff379d,

0px 2px 3px #ff379d,

0px -2px 3px #ff379d,

-2px -2px 3px #ff379d,

2px -2px 3px #ff379d,

-2px 2px 3px #ff379d,

2px 2px 3px #ff379d;

......

}

</style>

6.4.2 盒子阴影

盒子阴影指的就是 div 产生的阴影。在 CSS3 中，可以用 box-shadow 属性让 div 标签产生阴影效果。

语法：

box-shadow: h-shadow v-shadow blur spread color;

取值

说明

h-shadow

必需，阴影的水平距离。

v-shadow

必需，阴影的垂直距离。

blur

可选，阴影的模糊半径。

spread

可选，阴影的大小

color

可选，阴影的颜色。

示例：

<body>

	<div id="adv">

		<p id="title">手机大牌</p>

		<p id="msg">抢618大额神券</p>

	</div>

</body>


<style type="text/css">

	*{padding:0px;margin:0px;}

	#adv{

		height:300px;

		width:250px;

		text-align:center;

		font-family:"微软雅黑";

		border:1px solid #D8D5D5;

		background-image:url(Images/phone.png);

		background-repeat:no-repeat;

		background-size:200px 200px;

		background-position:center 80px;

		box-shadow:5px 5px 10px rgba(0,0,0,0.2);

		margin:10px;

	}

	#adv p{margin:10px;}

	#title{font-size:16px;}

	#msg{color:gray;font-size:14px;}

</style>

总结：

  • CSS3 的颜色样式包括颜色属性和背景颜色属性，用于设置文字颜色，以及为标签的背景设置颜色。
  • CSS3 的图片样式包括背景图片属性、背景图像的平铺属性，这些属性用于设置标签的背景图像显示效果，并且可以设置背景图像是否随标签内容滚动，指定背景图像在页面中显示的位置，以及背景图像的显示大小等。其中，background 属性可以使用连续的多个属性值
  • 在 CSS3 中新增加了标签的阴影显示效果，其中 text-shadow 属性用于创建文字的阴影，box-shadow 属性可以创建 div 的阴影效果。

HTML网页设计基础笔记 • 【第6章 背景和阴影】的更多相关文章

  1. HTML网页设计基础笔记 • 【目录】

    持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...

  2. HTML网页设计基础笔记 • 【第5章 常用的样式属性】

    全部章节   >>>> 本章目录 5.1 字体及文本属性 5.1.1 字体属性 5.1.2 文本属性 5.2 边距和填充 5.2.1 边距 5.2.2 填充 5.3 边框属性 ...

  3. HTML网页设计基础笔记 • 【第4章 CSS3基础】

    全部章节   >>>> 本章目录 4.1 CSS 概述 4.1.1 CSS 简介 4.1.2 CSS3 基本语法 4.1.3 样式表的分类 4.2 CSS 基本选择器 4.2. ...

  4. HTML网页设计基础笔记 • 【第2章 排列页面内容】

    全部章节   >>>> 本章目录 2.1 音频标签和视频标签 2.1.1 音频标签 2.1.2 视频标签 2.2 列表.div 以及 span 标签 2.2.1 列表标签 2. ...

  5. HTML网页设计基础笔记 • 【第7章 盒子模型】

    全部章节   >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...

  6. HTML网页设计基础笔记 • 【第3章 表单】

    全部章节   >>>> 本章目录 3.1 表单 3.1.1 表单概述 3.1.1 表单概述(续) 3.1.2 表单标签 3.1.3 表单数据的提交方式 3.2 输入框和按钮 3 ...

  7. HTML网页设计基础笔记 • 【第1章 HTML5基础】

    全部章节   >>>> 本章目录 1.1 HTML介绍及开发工具 1.1.1 HTML 的基本概念 1.1.2 网页 1.1.3 Web 标准 1.1.4 HTML5 与移动互 ...

  8. HTML网页设计基础笔记 • 【第8章 页面布局与规划】

    全部章节   >>>> 本章目录 8.1 表格布局 8.1.1 表格布局 8.2 流式布局 8.2.1 瀑布流布局 8.2.2 masonry 实现瀑布流布局 8.3 div ...

  9. [HeadFrist-HTMLCSS学习笔记]第五章认识媒体：给网页添加图像

    [HeadFrist-HTMLCSS学习笔记]第五章认识媒体:给网页添加图像 干货 JPEG.PNG.GIF有何不同 JPEG适合连续色调图像,如照片:不支持透明度:不支持动画:有损格式 PNG适合单 ...

随机推荐

  1. Tomcat中的Server.xml配置详解

    Tomcat中的Server.xml配置详解 Tomcat Server的结构图如下: 该文件描述了如何启动Tomcat Server <Server> <Listener /> ...

  2. linux之wc命令详解

    Linux系统中wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1.命令格式 wc [options] 文件... 2.命令功能 统计指定文件中的字 ...

  3. oracle中的控制语句

    一.条件语句1.流程控制-if else(1)ifif 判断条件 then      ...end if;(2)if-elseif 判断条件 then      ...else      ...end ...

  4. vue2 页面路由

    vue官方文档 src/views/Login.vue <template> <div> <h2>登录页</h2> </div> </ ...

  5. 【Linux】【Services】【SaaS】Docker+kubernetes（10. 利用反向代理实现服务高可用）

    1. 简介 1.1. 由于K8S并没有自己的集群,所以需要借助其他软件来实现,公司的生产环境使用的是Nginx,想要支持TCP转发要额外安装模块,测试环境中我就使用HAPROXY了 1.2. 由于是做 ...

  6. Vue中的8种组件通信方式

    Vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要. 常见使用场景可以分为三类: 父子组件通信: props / $emit $parent / $children provi ...

  7. Tomcat简单介绍

    1.目录结构 在conf文件夹中修改了配置之后一定要重启Tomcat

  8. 【C/C++】函数的默认参数/函数的占位参数/函数重载/注意事项

    函数的默认参数 返回值类型 函数名(参数=默认值){} #include <iostream> using namespace std; int func(int a = 10, int ...

  9. windows 显示引用账户已被锁定，且可能无法登录

    今天遇到一个比较尴尬的事情,清理笔记本键盘时,在锁屏界面多次碰到enter键,在登录界面被锁定无法登录. 一开始慌了,因为没遇到过这样的问题.百度一看方法不少,便开始尝试, 有的说是重启进入安全模式, ...

  10. 利用Windbg分析Magicodes.IE一次错误编写导致内存剧增

    由于这近一年时间一直忙于写书和工作,一直没有水文,但是近期有几位朋友使用我们的Magicodes.IE反馈在导出过程中内存暴涨...好吧,不管怎样,不能苦了我们朋友,接下来我们通过windbg来看一下 ...