前端之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背景样式设置的更多相关文章

  1. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  2. css中的列表样式

    在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表 ...

  3. css中的字体样式及元素样式

    css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...

  4. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  5. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  6. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  7. css中的段落样式及背景

    一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...

  8. CSS中的背景、雪碧图、超链接的伪类样式

    一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填 ...

  9. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

随机推荐

  1. 1.scala基础语法总结

    Scala基础语法总结:Scala 与 Java 的最大区别是:Scala 语句末尾的分号 ; 是可选的.如果一行里写多个语句那么分号是需要的 val s = "菜鸟教程"; pr ...

  2. caret 分类回归树 用法

    http://topepo.github.io/caret/feature-selection-overview.html

  3. python操作Redis缓存

    python操作Redis缓存 https://www.cnblogs.com/guotianbao/p/8683037.html 学习资料:电子书资源 联系邮箱:gmu1592618@gmail.c ...

  4. KMP算法细讲(豁然开朗)

    一.KMP算法是如何针对传统算法修改的 用模式串P去匹配字符串S,在i=6,j=4时发生失配: ---------------------------------------------------- ...

  5. input file 获取不到Request.Files 解决办法

    <input type="file" name="xxxxxxx"/>必须有“name”属性,否则在后台代码中用Request.Files是取不到值 ...

  6. C#中特殊的string类型

                                                                                  string C#有string关键字,在翻 ...

  7. cmake安装方法

    由于Ubuntu14.04的cmake版本为2.8.x,而如果需要cmake3.x版本时,无法生成makefile,有两种方法可以安装cmake3.10.0: 方法1: sudo apt-get in ...

  8. DataType--数值类型

    SQL Server数值类型可以分为精确数字类型和近似数字类型精确数字BIT/SMALLINT/TINYINT/INT/BIGINTNUMERIC/DECIMAL/SMALLMONEY/MONEY 近 ...

  9. React + Python 七月小说网 启程(一)

    一.为啥要做这个网站 很久没有写技术相关的博客了,最近几个月忙飞,各种工作,技术根本学不完,很难受. 趁着春节期间,终于有空闲时间做自己爱做的事情了,美滋滋. 热爱技术,热爱小说,于是诞生了个这么玩意 ...

  10. C#构造函数用法

    1.实例构造函数 2.静态构造函数 3.私有构造函数 例: 创建一个类 using System; using System.Collections.Generic; using System.Lin ...