认识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的三种引入方式:行内样式,内部 ...
随机推荐
- bzoj5392 [Lydsy1806月赛]路径统计
传送门 分析 我们设sum[x]为小于等于x的点现在有多少联通 于是一个序列合法当且只当sum[R]-sum[L-1]=len且所有点度数不大于2 我们知道如果对于序列[L,R]满足条件则[L+1,R ...
- dev 官网
https://www.devexpress.com/Support/Center/Example/Details/E1343 <%@ Page Language="C#" ...
- hdu 1556 Color the ball （线段树做法）
Problem Description N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的“小飞鸽"牌电动车从气球a ...
- IE浏览器和Firefox浏览器兼容性问题及解决办法
IE浏览器和Firefox浏览器兼容性问题及解决办法 为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox : 1.//w ...
- Mac OS X 下android环境搭建
安装jdk6.0版本以支持eclipse的安装 安装eclipse 安装jdk8.0版本,实际开发中用到的jdk 配置java环境变量 打开shell命令窗口(终端) 检测输入java -versio ...
- 独立部署GeoWebCache
在进行GIS项目开发中,常使用Geoserver作为开源的地图服务器,Geoserver是一个JavaEE项目,常通过Tomcat进行部署.而GeoWebCache是一个采用Java实现用于缓存WMS ...
- 【leetcode 5040. 边框着色】解题报告
方法一:dfs的非递归形式 using ll=long long; const ll MAXN=50LL; unordered_set<ll> vis,mark; vector<ve ...
- OC字符串与C语言字符串之间的相互转换
1.C转OC字符串 const char *cString = "This is a C string"; // 动态方法 NSString *ocString1 = [[NSSt ...
- loj #2538. 「PKUWC2018」Slay the Spire
$ \color{#0066ff}{ 题目描述 }$ 九条可怜在玩一个很好玩的策略游戏:Slay the Spire,一开始九条可怜的卡组里有 \(2n\) 张牌,每张牌上都写着一个数字\(w_i\) ...
- linux opencv版本查询
查看opencv安装路径: sudo find / -iname "*opencv*" 查看opencv版本: pkg-config opencv --modversion 查看o ...