认识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的三种引入方式:行内样式,内部 ...
随机推荐
- C#request和response的中文乱码问题
request乱码指的是:浏览器向服务器发送的请求参数中包含中文字符,服务器获取到的请求参数的值是乱码: response乱码指的是:服务器向浏览器发送的数据包含中文字符,浏览器中显示的是乱码: ...
- jQuery 演变史
一.说明 最近我读完了 jQuery 官方的博客仓库,目的是为了梳理清楚 jQuery API 接口的演变过程.从而明确知道在对应版本下使用正确.合适的 API,以下便是我的总结笔记. jQuery ...
- What is difference between 3-layer architecture and MVC architecture?
By Vikas Singh on Sep 26, 2014 In 3-layer architecture 3-layer architecture separates the applicati ...
- LibreOJ 6000 搭配飞行员(最大流)
题解:最基础的最大流,按照主飞行员与起点建边,副飞行员与终点建边,可以同坐的主副飞行员之间建边,值均为一,然后跑一边最大流就完美了! 代码如下: #include<queue> #incl ...
- 【SQL】- 基础知识梳理（八） - 事务与锁
事务的概念 事务:若干条T-SQL指令组成的一个操作数据库的最小执行单元,这个整体要么全部成功,要么全部失败.(并发控制) 事务的四个属性:原子性.一致性.隔离性.持久性.称为事务的ACID特性. 原 ...
- 仓储(Repository)和工作单元模式(UnitOfWork)
仓储和工作单元模式 仓储模式 为什么要用仓储模式 通常不建议在业务逻辑层直接访问数据库.因为这样可能会导致如下结果: 重复的代码 编程错误的可能性更高 业务数据的弱类型 更难集中处理数据,比如缓存 无 ...
- stegsolve的功能
- java 复习总结
java 复习总结 命名方法 创建文件的名称应该和类的名称一致,不然会报错. 类采用首字母大写的方式来命名,如果是多个单词的类名,则每个单词首字母都大写,例如:HelloWorld . 方法采用驼峰命 ...
- HDU6308-2018ACM暑假多校联合训练1011-Time Zone
题目大意就是给你UTC-8时区的时间 让你求对应时区的时间 哇 这个题 看似简单,但是一开始怎么都过不了啊 同学用自己写的read过了,后来看了一下各位大佬说改成分钟随便过,就随便过了 Problem ...
- EL表达式的语法与应用
EL(是Expression Language的缩写),使用EL对JSP输出进行优化,可以使得页面结构更加清晰,代码可读性高,也更加便于维护. EL表达式的语法: 语法:$(EL 表达式) $ 和 ...