CSS 背景实例

CSS 实例

CSS 背景实例
CSS 文本实例
CSS 字体(font)实例
CSS 边框(border)实例
CSS 外边距 (margin) 实例
CSS 内边距 (padding) 实例
CSS 列表实例
CSS 表格实例
轮廓（Outline）实例
CSS 尺寸 (Dimension) 实例
CSS 分类 (Classification) 实例
CSS 定位 (Positioning) 实例
CSS 伪类 (Pseudo-classes)实例
CSS 伪元素 (Pseudo-elements)实例

01-设置背景颜色

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>01设置背景颜色</title>

		<style type="text/css">

			body {background-color: #009e8e;}

			h1 {background-color: #ccf600;}

			h2 {background-color: transparent;}

			p {background-color: #ffae00;}

			p.no2 {background-color: #afd400; padding: 20px;}

		</style>

	</head>

	<body>

		<h1>我是标题1</h1>

		<h2>我是标题2</h2>

		<p>我是段落</p>

		<p class="no2">我设置了内边距。</p>

	</body>

</html>

02设置文本的背景颜色

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>02设置文本的背景颜色</title>

		<style type="text/css">

			body {

				background-color: #DDF0ED;

			}

			span.highlight {

				background-color: #C7FFEC;

			}

		</style>

	</head>

	<body>

		<p>

			<span class="highlight">你说你想在海边买一所房子。</span>你说你想在海边买一所房子。 你说你想在海边买一所房子。你说你想在海边买一所房子。 你说你想在海边买一所房子。你说你想在海边买一所房子。 你说你想在海边买一所房子。你说你想在海边买一所房子。 你说你想在海边买一所房子。

			<span class="highlight">你说你想在海边买一所房子。</span>

		</p>

	</body>

</html>

03将图像设置为背景

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>03将图像设置为背景</title>

		<style>

			body {

				background-image: url(http://images2015.cnblogs.com/blog/846157/201511/846157-20151129175534453-599329583.jpg);

				background-repeat: no-repeat;

			}

			p {

				background-color: #E8DEAB;

			}

		</style>

	</head>

	<body>

		<p>将图像设置为背景</p>

	</body>

</html>

04如何重复背景图像

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>04如何重复背景图像</title>

		<style>

			body {

				background-image: url(http://images2015.cnblogs.com/blog/846157/201511/846157-20151129183826047-1087351247.jpg);

				background-repeat: repeat;

			}

			p {

				background-color: #C7FFEC;

			}

		</style>

	</head>

	<body>

		<p>如何重复背景图像</p>

	</body>

</html>

05如何在垂直方向重复背景图像

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>05如何在垂直方向重复背景图像</title>

        <style>

            body {

                background-image: url(http://images2015.cnblogs.com/blog/846157/201511/846157-20151129190113985-22881767.png);

                background-repeat: repeat-y;

            }

            p {

                background-color: #C7FFEC;

            }

        </style>

    </head>

    <body>

        <p>如何在垂直方向重复背景图像</p>

    </body>

</html>

06如何在水平方向重复背景图像

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>06如何在水平方向重复背景图像</title>

        <style>

            body {

                background-image: url(http://images2015.cnblogs.com/blog/846157/201511/846157-20151129190113985-22881767.png);

                background-repeat: repeat-x;

            }

            p {

                background-color: #C7FFEC;

            }

        </style>

    </head>

    <body>

        <p>如何在水平方向重复背景图像</p>

    </body>

</html>

07如何仅显示一次背景图像

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>07如何仅显示一次背景图像</title>

		<style type="text/css">

			body {

				background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151203170936299-1397498783.jpg);

				background-repeat: no-repeat;

			}

		</style>

	</head>

	<body>

		<p>如何仅显示一次背景图像</p>

	</body>

</html>

08如何放置背景图像

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>08如何放置背景图像</title>

		<style type="text/css">

			body {

				background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151203221303643-1294680219.png);

				background-repeat: no-repeat;

				background-attachment: fixed;

				background-position: center;

			}

		</style>

	</head>

	<body>

		<p><b>提示:</b>您需要把 background-attachment 属性设置为 "fixed"，

			才能保证该属性在 Firefox 和 Opera 中正常工作。

		</p>

	</body>

</html>

09如何使用%来定位背景图像

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>09如何使用%来定位背景图像</title>

		<style type="text/css">

			body {

				background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151203223328455-392590785.png);

				background-repeat: no-repeat;

				background-attachment: fixed;

				background-position: 30% 20%;

			}

		</style>

	</head>

	<body>

		<p><b>注释：</b>为了在 Mozilla 中实现此效果，

			background-attachment 属性必须设置为 "fixed"。

		</p>

	</body>

</html>

10如何使用像素来定位背景图像

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>10如何使用像素来定位背景图像</title>

		<style type="text/css">

			body {

				background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151204104330361-341448993.png);

				background-repeat: no-repeat;

				background-attachment: fixed;

				background-position: 200px 50px;

			}

		</style>

	</head>

	<body>

		<p><b>注释：</b>为了在 Mozilla 中实现此效果，

			background-attachment 属性必须设置为 "fixed"。

		</p>

	</body>

</html>

11如何设置固定的背景图像



<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>11如何设置固定的背景图像</title>

		<style type="text/css">

			body {

				background-image: url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151204105729486-1236967824.jpg);

				background-repeat: no-repeat;

			}

		</style>

	</head>

	<body>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

		<p>图像不会随页面的其余部分滚动。</p>

	</body>

</html>

12所有背景属性在一个声明之中

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

		<title>12所有背景属性在一个声明之中</title>

		<style type="text/css">

			body {

				background: #C7FFEC url(http://images2015.cnblogs.com/blog/846157/201512/846157-20151204114642596-26790260.jpg) no-repeat fixed center;

			}

		</style>

	</head>

	<body>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

		<p>这是一些文本。</p>

	</body>

</html>

CSS背景实例总结：

W3School-CSS 背景实例的更多相关文章

CSS 背景实例
CSS 背景属性属性描述background 简写属性,作用是将背景属性设置在一个声明中.background-attachment 背景图像是否固定或者随着页面的其余部分滚动.background ...
html5--6-41 CSS背景
html5--6-41 CSS背景实例学习要点掌握CSS背景属性的使用元素的背景属性: background 简写属性,作用是将背景属性设置在一个声明中. background-attachm ...
CSS 背景background实例
css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...
CSS 背景-CSS background
这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识 CSS 背 ...
CSS 背景
CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背影效果: background-color background-image background-repeat background- ...
HTML 背景实例
71.HTML 背景实例好的背景使站点看上去特别棒.背景(Backgrounds)<body> 拥有两个配置背景的标签.背景可以是颜色或者图像.<body> 标签中的背景颜色( ...
css sprite实例
css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...
CSS背景和CSS3背景background属性
css背景属性用于定义HTML元素的背景背景属性既可以为单个的单元设置背景,也可以为整个页面设置背景,可以对上述二者的任意组合设置背景,段落.文字.不同状态的链接.图像.内容区域修改其背景样式.设置 ...
CSS：CSS 背景
ylbtech-CSS:CSS 背景 1.返回顶部 1. CSS 背景 CSS 背景属性用于定义HTML元素的背景. CSS 属性定义背景效果: background-color background ...

随机推荐

Oracle Database 11g For Windows7 旗舰版的安装
系统环境:win7 32位系统安装步骤: 1,Oracle(甲骨文)官网下载适合自己的数据库安装包,下载地址http://www.oracle.com/technetwork/cn/indexes/ ...
[moka同学笔记]YII2.0 判断签约状态，sql的两种查询方法
方法一: //判断签约状态 $signed = 0; $sql="SELECT * from usho_community_sign_record WHERE com_id=$r->i ...
C#中委托实现的异步编程
所谓同步:如果在代码中调用了一个方法,则必须等待该方法所有的代码执行完毕之后,才能回到原来的地方执行下一行代码. 异步:如果不等待调用的方法执行完,就执行下一行代码. 1.0 同步例子: class ...
Tomcat如何设置网站的默认首页
在Tomcat安装完成后, 在其安装目录下会有一个config文件夹, 打开其中的server.xml文件, 找到相应的directory字段, 设置默认的文件, 重启服务器即可.
go语言新手学习笔记 go基础教程
目前这方面的资料相对较少,自己手动整理汇集. 第一章:安装第一节:下载go语言第二节:windows 安装 go语言第三节: 第二章:基本语法第一节:类型 .
js实现标准无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
sharepoint2010问卷调查（4）-实现问卷的重复答复次数（采用自定义字段类型和JS）
sharepoint的问卷调查可以设置重复和一次答复.但是设置一次后,调查过的用户再进行答复.会提示如下图: 分析下:该提示用户体验很不好.给用户感觉是系统出问题了.因此网上有人提出用eventhan ...
劳动节脑洞大开！利用Debug API 获取加壳客户端的MD5值
系统 : Windows xp 程序 : 某游戏客户端程序下载地址 :不提供要求 : 远程注入 & 获取MD5值使用工具 : vc++6.0 & OD 案例说明: 该游戏客户端对 ...
android HorizontalScrollView
第一个控件,借鉴网上的资料,自己稍加修改,横向滑动图片浏览功能,纪念下布局文件 <?xml version="1.0" encoding="utf-8" ...
Android IPC机制之AIDL
什么是AIDL AIDL:Android Interface Definition Language,即Android接口定义语言. Android系统中的进程之间不能共享内存,因此,需要提供一些机制 ...

W3School-CSS 背景实例

CSS 背景实例

CSS 实例

01-设置背景颜色

02设置文本的背景颜色

03将图像设置为背景

04如何重复背景图像

05如何在垂直方向重复背景图像

06如何在水平方向重复背景图像

07如何仅显示一次背景图像

08如何放置背景图像

09如何使用%来定位背景图像

10如何使用像素来定位背景图像

11如何设置固定的背景图像

12所有背景属性在一个声明之中

CSS背景实例总结：

W3School-CSS 背景实例的更多相关文章

随机推荐

热门专题