HTML网页设计基础笔记 • 【第6章背景和阴影】

全部章节 >>>>

本章目录

6.1 背景属性

6.1.1 背景颜色

6.1.2 背景图片

6.1.3 背景图片的重复方式

6.2 背景图片的定位

6.2.1 background-position 属性

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 的阴影效果。

posted @ 2020-03-24 21:54 明金同学阅读(97) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

明金同学

00后创作者 - JAVA工程师

HTML网页设计基础笔记 • 【第6章背景和阴影】

全部章节 >>>>

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 盒子阴影

总结：

公告

明金同学

00后创作者 - JAVA工程师

HTML网页设计基础笔记 • 【第6章 背景和阴影】

全部章节 >>>>

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 盒子阴影

总结：

公告

HTML网页设计基础笔记 • 【第6章背景和阴影】