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 ...

随机推荐

iOS 10 常见配置的问题
UITextField 在iOS 10 中,UITextField新增了textContentType字段,是UITextContentType类型,它是一个枚举,作用是可以指定输入框的类型,以便系统 ...
[python拾遗]enumerate()函数
在python中处理各类序列时,如果我们想显示出这个序列的元素以及它们的下标,可以使用enumerate()函数. enumerate()函数用于遍历用于遍历序列中的元素以及它们的下标,用法如下: 1 ...
php 设置mssql编码解决乱码问题 mssql_connect charset Utf8
当用mssql存储数据采用 nchar 或 nvarchar 存储时 , 由于nchar 或 nvarcha 不支持 UCS-2 ( 即 SQLServer 不会按照 UTF-8 格式存储) 导致P ...
JProfiler 8下载地址和注册码
JProfiler---- 一个很好的java性能监控工具,现在附上下载地址和注册码,此破解版仅供学习交流使用, 其他用途请购买正版授权!!!windows x64 zip下载地址:http://do ...
Microsoft SQL Server Compact 4.0&&ADO.NET Entity Framework 4.1&&MVC3
最近重新查看微软MvcMusicStore-v3.0的源代码,发现忽略了很多重要的东西,特别是数据访问那一部分. 首先Microsoft SQL Server Compact 4.0 详细的介绍和下载 ...
css知多少（10）——display
1. 引言网页的所有元素,除了“块”就是“流”,而且“流”都是包含在“块”里面的(最外层的body就是一个“块”).在本系列一开始讲<浏览器默认样式>的时候,大家也都看到了浏览器默认样式 ...
TwentyTwenty – 使用 jQuery 实现图片对比功能
这是一款非常棒的图片对比工具,能够方便的应用到你的网站中.其基本思路是把两张图片层叠在一起,当你拖动滑竿的时候,利用 CSS clip 裁剪图片,进行形成视觉对比效果. 您可能感兴趣的相关文章 Met ...
VisualCaptcha – 灵活的可视化验证码解决方案
visualCaptcha 是一个可配置的验证码解决方案,专注于可访问性和简单性,同时保持安全性.它也支持移动,视网膜设备,并有一个创新的可访问性的解决方案. visualCaptcha 现在可以跨多 ...
windows 80 端口占用
1. cmd 2. regidit 3. 注册表 KEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\HTTP'右边有一个'start'的DWORD ...
SharePoint 2013 使用 PowerShell 更新用户
在SharePoint开发中,经常会遇到网站部署,然而,当我们从开发环境,部署到正式环境以后,尤其是备份还原,所有用户组的用户,还依然是开发环境的,这时,我们就需要用PowerShell更新一下: P ...

W3School-CSS 背景实例

CSS 背景实例

CSS 实例

01-设置背景颜色

02设置文本的背景颜色

03将图像设置为背景

04如何重复背景图像

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

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

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

08如何放置背景图像

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

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

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

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

CSS背景实例总结：

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

随机推荐

热门专题