认识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的三种引入方式:行内样式,内部 ...
随机推荐
- 28. LAST() 函数
LAST() 函数 LAST() 函数返回指定的字段中最后一个记录的值. 提示:可使用 ORDER BY 语句对记录进行排序. SQL LAST() 语法 SELECT LAST(column_nam ...
- Entity Framework 6.0 Tutorials（10）：Index Attribute
Index Attribute: Entity Framework 6 provides Index attribute to create Index on a particular column ...
- httpd和apache的区别
今天要配置集成服务器环境 apache + tomcat + php + jsp + mysql + sqlserver 去下载apache 发现有: apache_2.2.14-win32-x86 ...
- 使用Monkey对APP进行随机测试
Monkey测试简介 Monkey测试是Android平台自动化测试的一种手段,通过Monkey程序模拟用户触摸屏幕.滑动Trackball.按键等操作来对设备上的程序进行压力测试,检测程序多久的时间 ...
- 三解炸弹人——DFS
原创 枚举解炸弹人—— https://www.cnblogs.com/chiweiming/p/9295262.html BFS解炸弹人—— https://www.cnblogs.com/chiw ...
- 企业管理系统——第三周需求&原型改进_张正浩，黄锐斌
企业管理系统——需求&原型改进,架构设计,测试计划 组员:张正浩,黄锐斌 一.需求&原型改进 1.给目标用户展现原型,与目标用户进一步沟通理解需求 我们的目标用户是公司管理员 场景:随 ...
- Snapshot--使用脚本创建快照
USE master; SET NOCOUNT ON; GO ); --数据库名 );--快照名 );--保存路径 SET @dbname='DB1'; SET @snapname='DB1_SNAP ...
- C# 高斯消元项目运用
C# 高斯消元项目运用 最近项目涉及到一个需求,需要把指定数量的多个商品,混合装入到多个不同型号的箱子中(每种型号的箱子装入商品的种类和个数是固定的).这就涉及到解多元一次方程 针对多元一次方程一般用 ...
- 21天学通C++学习笔记（四）：数组和字符串
1. 数组 概念 是一组元素 这些元素是相同的数据类型 按顺序存储到内存中 目的是避免在业务需要时去重复声明很多同类型的变量 初始化 分别初始化:int i [5] = {1,2,3,4,5}; 全部 ...
- 【转】检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件失败，原因是出现以下错误: 80070005 拒绝访问
源地址:https://www.cnblogs.com/love522/p/4462253.html 最近在做一个网站时,有一个下载word文档功能,在本地直接调试是可以下载的,但部署到IIS上就出现 ...