W3School-CSS 背景实例
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 ...
随机推荐
- Docker: adding a file from a parent directory
17down votefavorite 4 In my Dockerfile I've got : ADD ../../myapp.war /opt/tomcat7/webapps/ That fil ...
- Firemonkey Bitmap 设定像素颜色 Pixel
VCL 和 Firemonkey 的 Bitmap 处理像素的方式不相同,下例为将图片内不是「白色」的像素全部改成「黑色」: procedure TForm1.Button1Click(Sender: ...
- 2016 大连网赛---Different GCD Subarray Query(GCD离散+树状数组)
题目链接 http://acm.split.hdu.edu.cn/showproblem.php?pid=5869 Problem Description This is a simple probl ...
- 为什么正常安装并成功运行了Genymotion虚拟但是运行的时候启动的却是自带的模拟器？
最近因为这个问题困惑了好久,最终找到了解决思路: 点击genymotion——setting——ADB——Use sustom Android tools,找到电脑中SDK文件位置就可了! 希望自己坚 ...
- C#开发可以可视化操作的windows服务
使用C#开发自定义windows服务是一件十分简单的事.那么什么时候,我们需要自己开发windows服务呢,就是当我们需要计算机定期或者一 直执行我们开发的某些程序的时候.我经常看到许多人开发的win ...
- HTTP 方法：GET 对比 POST
什么是 HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客户机与服务器之间的请求-应答协议. web 浏览器可能是客户端,而计算机上的网络应用程 ...
- 七个结构模式之适配器模式(Adapter Pattern)
定义: 将一个接口转换为客户需要的另外一个接口,使接口不兼容的类型可以一起工作,也被称为包装器模式(Wrapper Patern). 结构图: Target:目标抽象类,客户所需要的接口. Adapt ...
- struts原理
Struts是一个开源的web框架. 为什么会有struts? 因为我们对mvc理解的不同,可能造成不同公司写程序的时候,规范不统一,这样不利于程序的维护和扩展,所以我们有必要用一个统一的规范来开发项 ...
- mysql登录时闪退的问题
之前mysql用着好着,可是今天在启动mysql后输入密码出现了闪退,在任务管理器中发现mysql服务没有启动,当手动启动时提示拒绝访问.在网上查找原因发现问题所在. 问题原因:mysql服务没有安装 ...
- asp.net+nopi生成Excel遇到设置单元格值null问题
Npoi 生成excel报表功能很不错,功能也不用给大家介绍了.首先看遇到的问题吧! FileStream file = new FileStream(Server.MapPath("Tem ...