认识CSS中css背景样式设置
前端之HTML，CSS（五）
CSS
CSS背景
CSS可以添加背景颜色和背景图片，也可以对图片进行设置。设置的样式有：
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-repeat | 是否平铺 |
| background-position | 背景位置 |
| background-attachment | 背景是固定还是滚动 |
background-color：设置背景颜色，属性值：颜色设置三种方式：red、#f00、rgb(255,0,0)。注意CSS3中使用rgba(R,G,B,A),其中A代表透明度，属性值取值范围为0-1，0为透明，1为不透明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色-测试</title>
<style type="text/css">
body {
background-color: red;
}
</style>
</head>
<body>
<p>背景颜色</p>
</body>
</html>
backgound-image：设置背景图片，属性值：URL（）添加图片路径，路径设置：绝对路径，相对路径（推荐使用）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片-测试</title>
<style type="text/css">
body {
background-image: url(images/content-01.jpg);
}
</style>
</head>
<body>
<p>背景颜色</p>
</body>
</html>
background-repeat：设置图片是否平铺，属性值：repeat(缺省值，背景图片横向、纵向平铺)、no-repeat(背景图片不平铺)、repeat-x(背景图片横向平铺)、repeat-y(背景图片纵向平铺)。
测试图片
（图片网络随意下载，有损请联系删除）
默认缺省情况，即background-repeat:repeat
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平铺效果-测试</title>
<style type="text/css">
body {
background-image: url(images/test.jpg);
}
</style>
</head>
<body> </body>
</html>
等同于：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平铺效果-测试</title>
<style type="text/css">
body {
background-image: url(images/test.jpg);
background-repeat: repeat;
}
</style>
</head>
<body> </body>
</html>
效果展示：背景图片横向、纵向平铺。
background-repeat:no-repeat
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平铺效果-测试</title>
<style type="text/css">
body {
background-image: url(images/test.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body> </body>
</html>
效果展示：背景图片不平铺。
background-repeat：repeat-x
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平铺效果-测试</title>
<style type="text/css">
body {
background-image: url(images/test.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body> </body>
</html>
效果展示：背景图片只横向平铺。
background-repeat：repeat-y
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平铺效果-测试</title>
<style type="text/css">
body {
background-image: url(images/test.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body> </body>
</html>
效果展示：背景图片只纵向平铺
background-position：设置背景图片位置，缺省默认情况，图片在左上角，即左边框距离为0，上边框距离为0。属性值：位置设定两种方式：方位名词：left（左）、right（右）、top（上）、bottom（下）、center（中）；像素：Xpx Ypx，Xpx表示图片距离左边框距离X像素值，Ypx表示图片距离上边框距离为Ypx。
默认缺省情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>位置效果-测试</title>
<style type="text/css">
div {
width: 500px;
height: 500px;
background-color: black;
background-image: url(images/test.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
等同于
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>位置效果-测试</title>
<style type="text/css">
div {
width: 500px;
height: 500px;
background-color: black;
background-image: url(images/test.jpg);
background-repeat: no-repeat;
background-position: left top;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
同样等同于
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>位置效果-测试</title>
<style type="text/css">
div {
width: 500px;
height: 500px;
background-color: black;
background-image: url(images/test.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
效果展示：图片位于左上角。
方位名词设定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>位置效果-测试</title>
<style type="text/css">
div {
width: 500px;
height: 500px;
background-color: black;
background-image: url(images/test.jpg);
background-repeat: no-repeat;
background-position: left center;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
效果展示：图片位于左中位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>位置效果-测试</title>
<style type="text/css">
div {
width: 500px;
height: 500px;
background-color: black;
background-image: url(images/test.jpg);
background-repeat: no-repeat;
background-position: left center;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
效果展示：图片位于下中位置。
background-position: right bottom;图片位于右下角、background-position: top right;图片位于右上角。
像素设定：方位名字设定，图片都是贴着上下左右四个边框的，使用像素值设定可以脱离边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>位置效果-测试</title>
<style type="text/css">
div {
width: 500px;
height: 500px;
background-color: black;
background-image: url(images/test.jpg);
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
效果展示：图片距离左边框50px，距离上边框100px。
设定positon属性值时，可以缺省第二个属性值，当缺省第二个属性值位置时，默认为center。例如，background-position: top；图片位于上中位置，background-position: right；图片位于右中位置。background-position：20px；图片位于距左边框20像素，垂直居中的位置。
此外，position属性值也可同时设定方位名词和像素，但是需要注意：X方位名词（left、right）和Ypx交叉使用，Xpx和Y方位名词交叉使用。例如，background-position：20px top；或者background-position：right 20px；切不可使用background-position：bottom 20px。
background-attachment：设置背景图片是否跟随页面内容滚动。默认缺省属性值为scroll，可以设置属性值：scroll（滚动）、fixed（固定）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动效果-测试</title>
<style type="text/css">
div {
background-image: url(images/content-01.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>
</head>
<body>
<!-- 增加文本内容出现滚动条 -->
<div>
<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>
<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>
</div>
</body>
</html>
滚动设定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动效果-测试</title>
<style type="text/css">
div {
background-image: url(images/content-01.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>
</head>
<body>
<!-- 增加文本内容出现滚动条 -->
<div>
<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>
<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>
</div>
</body>
</html>
等同于
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动效果-测试</title>
<style type="text/css">
div {
/*图片分辨率为1500*2100*/
background-image: url(images/content-01.jpg);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<!-- 增加文本内容出现滚动条 -->
<div>
<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>
<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>
</div>
</body>
</html>
background：设置背景连写，同之前font设置一样，但是可以不按照一定顺序设定属性值。基本语法：background：{background-color属性值 background-image属性值 background-repeat属性值 background-attachment属性值 background-posiiton属性值}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动效果-测试</title>
<style type="text/css">
div {
/*图片分辨率为1500*2100*/
background: skyblue url(images/test.jpg) no-repeat fixed 50px;
}
</style>
</head>
<body>
<!-- 增加文本内容出现滚动条 -->
<div>
<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>
<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>
</div>
</body>
</html>
上述效果可自行测试
购物车按钮案例
测试图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车按钮案例-测试</title>
<style type="text/css">
div a {
display: block;
width: 67px;
height: 32px;
background-image: url(images/110.png);
background-position: center top;
} div a:hover {
background-position: center bottom;
}
</style>
</head>
<body>
<div>
<a href="#"></a>
</div>
</body>
</html>
认识CSS中css背景样式设置的更多相关文章
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- css中的列表样式
在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表 ...
- css中的字体样式及元素样式
css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
- Vue项目打包发布后CSS中的背景图片不显示
相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...
- css中的段落样式及背景
一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...
- CSS中的背景、雪碧图、超链接的伪类样式
一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填 ...
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
随机推荐
- 14.UNION 和 UNION ALL 操作符
union all union UNION 操作符用于合并两个或多个 SELECT 语句的结果集.请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同 ...
- 5.WHERE 子句
WHERE 子句用于规定选择的标准. WHERE 子句 如需有条件地从表中选取数据,可将 WHERE 子句添加到 SELECT 语句. 语法 SELECT 列名称 FROM 表名称 WHERE 列 运 ...
- MagicNotes：突破来自外界的脑力压制
MagicNotes,思绪随风飞扬,偶尔在这里停留. 在前面的<MagicNotes:如何迈向工作的坦途>里面,我们提到了在工作中应该发挥好个人的主观能动性,简单来说就是要学会主动出击.但 ...
- py_initialize:C调Python出错 是初始化错误？
还是pythonpath和pythonname变量没有配置正确? py_initialize()方法是什么? In an application embedding Python, this shou ...
- wpf path语法
http://www.cnblogs.com/HQFZ/p/4452548.html WPF系列 Path表示语法详解(Path之Data属性语法)
- 装饰（Decorator）模式
一. 装饰(Decorator)模式 装饰(Decorator)模式又名包装(Wrapper)模式[GOF95].装饰模式以对客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 二. 装饰模式 ...
- CString::MakeLower Crash
记录一下使用CString::MakeLower可能导致的crash的一个问题: 问题重现: int _tmain(int argc, _TCHAR* argv[]){ std::string sT ...
- C# File类常用方法
File 类 提供用于创建.复制.删除.移动和打开文件的静态方法,并协助创建 FileStream 对象. 1. File.Exists —— 确定指定的文件是否存在. public static ...
- C# return、continue、break
return 终止当前进程 可用循环判断,验证,等功能 if (ew == v) { PublicControlLib.Class.PublicProperties.ShowSuccess(); re ...
- WinForm中TabControl的使用
TabControl和TabPage之间有一个默认颜色的边框,很难去除,需要重写TabControl控件重绘区域 public class FullTabControl : TabControl { ...