CSS 背景实例
CSS 背景属性
属性 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。 #############
提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。 可能的值
值 描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
################
background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响 ############## 1.设置背景颜色
本例演示如何为元素设置背景颜色。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body { padding: 20px;}
</style>
</head>
<body>
<h1>header 1</h1>
<h2>header 2</h2>
<p>A paragraph.</p>
<p class="no2">这个段落设置了内边距</p>
</body> 2.设置文本的背景颜色
本例颜色如何设置部分文本的背景颜色。
###
span标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。
###
实例1
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span.highlight
{ }
</style>
</head>
<body>
<p>
<span class="highlight"> 这是文本</span>
这是文本。
<span class="highlight">这是文本。</span>
</p> </body> 3.将图像设置为背景
本例演示如何将图像设置为背景。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {background-image: url(bj2.png);}
</style>
</head>
<body> </body> 4.如何重复背景图像
本例演示如何重复背景图像。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {background-image:
url(bj1.png);
background-repeat: repeat}
</style>
</head>
<body> </body> 5.如何在垂直方向重复背景图像
本例演示如何垂直地重复背景图像。 <style type="text/css">
body
{
background-image:
url(bj2.png);
background-repeat: repeat-y
}
</style> </head>
<body> </body>
6.如何在水平方向重复背景图像
本例演示如何水平地重复背景图像。 <head>
<style type="text/css">
body
{ background-image: url("bj2.png");
background-repeat: repeat-x;
}
</style>
</head>
<body> </body> 7.如何仅显示一次背景图像
本例演示如何仅显示一次背景图像。 <head>
<style type="text/css">
body
{
background-image: url("bj1.png");
background-repeat: no-repeat;
}
</style>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> </body> 8.如何放置背景图像
本例演示如何在页面上放置背景图像。 <head>
<style type="text/css">
body
{
background-image: url("bj2.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body> <p><b>提示</b>
您需要把background-attachment 属性设置为“fixed”, 才能保证该属性在firefox 和opera 中正常工作。
</p>
</body> 9.如何使用%来定位背景图像
本例演示如何使用百分比来在页面上定位背景图像。
<head>
<style type="text/css">
body
{
background-image: url("bj2.png");
background-repeat:no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
</style>
<meta charset="UTF-8" >
</head>
<body>
<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p>
</body> 10.如何使用像素来定位背景图像
本例演示如何使用像素来在页面上定位背景图像。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body
{
background-image: url("bj2.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
</style>
</head>
<body>
<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。</p> </body> 11.如何设置固定的背景图像
本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body
{
background-image: url("bj2.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
</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>
</body> 12.所有背景属性在一个声明之中
本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body
{
background: red url("bj2.png") 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>
</body>
CSS 背景实例的更多相关文章
- W3School-CSS 背景实例
CSS 背景实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 (paddi ...
- 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 ...
随机推荐
- [Linux|DBA]运维三十六计
这里是腾讯两位大神梁定安.周小军总记得运维DBA三十六计--
- python基础学习22----协程
协程,又称微线程.英文名Coroutine. 协程最大的优势就是协程极高的执行效率.因为子程序切换不是线程切换,而是由程序自身控制,因此,没有线程切换的开销,和多线程比,线程数量越多,协程的性能优势就 ...
- 【转】Java学习---算法那些事
[更多参考] LeetCode算法 每日一题 1: Two Sum ----> 更多参考[今日头条--松鼠游学] 史上最全的五大算法总结 Java学习---7大经典的排序算法总结实现 程序员都应 ...
- PHP 与 YAML
PHP 与 YAML 这一段时间都没有写blog,并不是因为事情多,而是自己变懒了.看到新技术也不愿意深入思考其背后的原理,学习C++语言了近一个多月,由于学习方法有问题,并没有什么项目可以练手.靠每 ...
- Excel思考问题的方式
Excel思考问题的方式 一.写需求,说我要什么数据 好比如,现在咱们需要将第一周.第二周.第三周.第四周.….等E:E列里的"每一周的 第二个数值"提取出来.那么我们手动提取了几 ...
- Chrome 打印PDF技巧
Chrome 打印PDF技巧 原文地址:https://github.com/zhongxia245/blog/issues/22 欢迎star 本教程,使用Mac电脑进行演示. 常规的Chrome打 ...
- Alpha冲刺&总结报告（12/12）（麻瓜制造者）
各个成员今日完成的任务 邓弘立: 完成了上传头像的功能 符天愉: 对所有接口进行了再次测试 江郑: 完成了发布需求接口部分的进一步测试和接口文档的编写 刘双玉: 完成了商品信息接口部分的进一步测试和接 ...
- ICP点云配准原理及优化
ICP算法简介 根据点云数据所包含的空间信息,可以直接利用点云数据进行配准.主流算法为最近迭代算法(ICP,Iterative Closest Point),该算法是根据点云数据首先构造局部几何特征, ...
- python第三十六课——1.可迭代对象
1.可迭代对象: 满足前提: 只要能被循环操作的对象,就可以可迭代对象 举例: str.list.tuple.set.dict.range.generator... 高效的检测一个对象是否是可迭代对象 ...
- [JLOI2013]删除物品
嘟嘟嘟 只要每一次将优先级最高的上面的物品移走,就一定能保证是最优解. 所以我们只要想办法简化这个模拟移物品的过程,看完了题解后,发现可以这么想,我们可以把两个栈头碰头的挨在一起,然后设一个指针代表两 ...