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

随机推荐

制作rpm包步骤
由于项目需要,需要自行制作rpm包.比较全面的可以参考如下链接: http://blog.chinaunix.net/uid-23069658-id-3944462.html 大致框架如下: 1,安装 ...
IOS个人帐号推送证书创建
(IOS个人帐号推送证书制作所有步骤: 可以直接将产品推送证书和开发者推送证书一起制作到一个Identifier帐号下) 一. 首先需要创建一个id:有推送功能的(App ID Suffix)只有它才 ...
HTML5开发IDE介绍
开发html5的工具可供选择的有:Intellij Idea.Eclipse.WebStorm三个软件.在PC端与手机端,同步测试HTML5网页.测试发布软件:FileZilla JavaScript ...
阿里巴巴笔试整理系列 Session2 中级篇
1知识点储备-----2笔试题总结-----3面试经验总结知识点储备 2014年8月29日在线笔试题:20单选(40分钟内完成)+附加题(2道编程+1道问答) 1. 通过算法生成的随机数是“伪随机” ...
python补充最常见的内置函数
最常见的内置函数是: print("Hello World!") 数学运算 abs(-5) # 取绝对值,也就是5 round(2. ...
【背景建模】PbModel
PbModel是基于概率模型的背景差分算法,其基本思想是像素点会因光照变化.运动物体经过产生多种颜色值,但是一段时间内,像素点处于静止状态的时间会比处于运动状态的时间长.因而一段时间内,像素点某个颜色 ...
分享一组很赞的 jQuery 特效【附源码下载】
作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些 ...
Swiper – 经典的移动触摸滑块插件【免费】
Swiper 是移动 Web 开发中最常用的滑块插件,是一款免费的,最现代化的移动触摸滑块,支持硬件加速的转换和惊人的原生表现.它的目的是在移动网站,移动 Web 应用程序和 Hygrid 混合应用程 ...
20款时尚的 WordPress 博客主题【免费下载】
在这篇文章中,我们收集了20款时尚的 WordPress 博客模板.WordPress 作为最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单 ...
[deviceone开发]-do_FrameAnimtionView的简单动画示例
一.简介 do_FrameAnimtionView组件是用加载GIF动态图片和加载一系列图片形成动画效果的展示组件,这个示例直观的展示组件基本的使用方式.适合初学者. 二.效果图三.相关下载 htt ...

W3School-CSS 背景实例

CSS 背景实例

CSS 实例

01-设置背景颜色

02设置文本的背景颜色

03将图像设置为背景

04如何重复背景图像

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

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

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

08如何放置背景图像

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

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

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

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

CSS背景实例总结：

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

随机推荐

热门专题