文章目录

  • 前言
  • 一、css的常用样式-背景属性
    • 1.背景颜色 background-color
    • 2.背景图片 background-image
    • 3.背景重复 background-repeat
    • 4.背景定位 background-position
    • 5.背景附着 background-attachment
    • 6.综合使用 background
  • 二、背景属性的应用
    • 1.替换插入图
    • 2.padding区域背景图
    • 3.精灵图技术
    • 4.css3新增背景属性
  • 三、定位position
    • 1.相对定位relative
    • 2.绝对定位absolute
    • 3.绝对定位absolute
    • 4.固定定位fixed
    • 5.定位应用
    • 6.压盖顺序
  • 总结

前言

又是内容超级多的一天啊，多也要学完，今天学校三节课呢，自己学习的时间少了点了，所以拖到今天才发文。加油，坚持住！

一、css的常用样式-背景属性

1.背景颜色 background-color

background-color,作用在盒子区域内添加背景颜色进行修饰，在border及以内加载背景颜色。属性值有颜色名，颜色值。

代码如下（示例）：

 .box {width: 200px;height: 200px;padding: 50px;margin: 50px;border: 10px dashed red ;background-color: rosybrown;}

2.背景图片 background-image

background-image，作用是给盒子添加图片的背景修饰。属性值是url（图片路径）图片可加载在border以内及以上。
background-repeat：no-repeat。背景图片可加载在border以内。
代码如下（示例）：

background-image: url(images/meng.jpg);

3.背景重复 background-repeat

background-repeat，作用设置添加的背景图是否要在盒子内重复进行加载。根据属性值不同，有四种重复加载方式。搭配background-image使用的。
repeat，默认值，重复。
no-repeat，不重复。
repeat-x，水平方向重复加载。
repeat-y，垂直方向重复加载。
代码如下（示例）：

 background-image: url(images/meng.jpg);background-repeat: no-repeat;

4.背景定位 background-position

background-position，用于设置不同的图片在背景区域加载开始的位置。三种写法：单词表示法，像素表示法，百分比表示法，两个属性值之间用空格分隔开。
第一个属性值表示背景图片在水平方向上的位置。
（1）单词表示法：
水平方向：left center right
垂直方向：top center bottom
（2）像素表示法：
正代表向右向下，负代表向左向上。
（3）百分比表示法：
100%
水平方向代表，border以内的宽度减去图片的宽度。
垂直方向代表，border以内的高度减去图片的高度度。
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 300px;padding: 30px;border: 10px dashed red ;margin: 50px;/* background-color: rosybrown; */background-image: url(../images/meng.jpg);background-repeat: no-repeat;background-position: right bottom ;}</style>
</head>
<body><div class="box">111</div>
</body>
</html>

效果展示：

5.背景附着 background-attachment

background-attachment，作用是背景图片是否随着页面或者盒子滚动而滚动。
scroll，背景图片与盒子保持相对不变，随着页面的滚动而滚动走。
fixed，背景图片定在浏览器窗口之上，不会随着页面滚动而滚动走。
代码如下（示例）：

 body {background-image: url(../images/bg4.jpg);background-repeat: no-repeat;background-position: center top;/* background-attachment: scroll; */background-attachment: fixed;}

6.综合使用 background

对五个单一的属性进行和写。

代码如下（示例）：

background: url(../images/bg4.jpg) no-repeat center top lightblue scroll;

注意事项：
1.如果没有五个属性全部设置，没有设置的就按默认值自动加载。
2.可以用单一属性层叠综合属性的一部分。

二、背景属性的应用

1.替换插入图

文字隐藏的方法：
（1）将文字字号设置为零。（但有兼容问题，IE8以下浏览器不能用）
（2）text-indent，属性值负到很大时，文字就会走到盒子外部。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}h1 {width: 146px;height: 58px;margin: 0 auto;}h1 a {display: block;width: 146px;height: 58px;background: url(../images/logo.png) no-repeat;/* font-size: 0; */text-indent: -15em;overflow: hidden;}</style>
</head>
<body><h1><!-- <a href="#"><img src="../images/logo.png" alt=""></a> --><a href="#">淘宝网|直播|购物</a></h1>
</body>
</html>

2.padding区域背景图

padding
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}h1 {width: 146px;height: 58px;margin: 0 auto;}h1 a {display: block;width: 146px;height: 58px;background: url(../images/logo.png) no-repeat;/* font-size: 0; */text-indent: -15em;overflow: hidden;}.list {width: 300px;padding-left: 10px;border: 1px solid #333;margin: 10px;list-style: none;font: 16px/32px "微软雅黑";}.list li {padding-left: 20px;background: url(../images/s.png) no-repeat left center;}</style>
</head>
<body><h1><!-- <a href="#"><img src="../images/logo.png" alt=""></a> --><a href="#">淘宝网|直播|购物</a></h1><ul class="list"><li>新闻标题新闻标题新闻新闻标题题</li><li>新闻标题新闻标题新闻题</li><li>新闻标题新闻标题标题</li><li>新闻标题新闻标题新闻标题新闻标题</li><li>新闻标题新闻标题新闻标题题新闻标题</li><li>新闻标题新闻标题新闻标题新闻标题</li></ul>
</body>
</html>

效果展示：

3.精灵图技术

css精灵是一种处理网页背景图像的方式。是将一个页面中涉及到的所有零星的背景图，都集中到一个大图中，将大图应用到网页，这样用户访问一次，背景图就可以全部展示出来。（节省工作效率）小背景图合成的大图就成为精灵图。

css精灵技术的依据：
（1）网页中要用到小尺寸的大图制作成一张透明的背景图png
（2）背景定位，把每个小图片加载到固定位置上。
制作精灵图的注意事项：
（1）小的装饰性的背景图，插入图片不能往上放。
（2）精灵图的宽度取决于最宽的那个背景图片的标签宽度。
（3）可横向摆放也可纵向摆放，但每个图片间必须留有足够的空白，保证背景图片加载到标签内部时，不会出现多余的内容。
（4）精灵图的底端增加空白，方便以后添加其他精灵图。
代码如下（示例）：

 p {width: 80px;height: 20px;background: url(../images/icons.png) no-repeat -146 -48;}

4.css3新增背景属性

（1）rgba支持背景半透明，颜色值中增加了rgba模式。0表示完全透明，1表示完全不透明，0.5表示半透明。字体边框等都可以使用半透明。
书写方式：rgba（红色，蓝色，绿色，不透明）
（2）background-size,设置背景图的大小尺寸（不能与background进行合写）

（3）多背景，一个盒子上可以添加多张背景图片。background-image的多个url路径，中间逗号分隔，先写的背景图会在下面，后写的背景图在上面。

三、定位position

position，属性值relative相对定位，absolute绝对定位，fixed固定定位。

1.相对定位relative

参考标签加载的原始位置，搭配偏移量属性才能移动。偏移量属性是区分正负的。同一方向不能写两个偏移量，例如left、right
性质：不脱离标准流，不会让出原来的位置。
建议使用：left和top组合
相对定位的应用：
代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.nav {width: 1080px;height: 50px;margin: 100px auto;background-color: lightblue;list-style: none;}.nav li {float: left;width: 180px;height: 50px;}.nav li a {display: block;width: 180px;height: 50px;font: 18px/50px "微软雅黑";text-align: center;color: #333;text-decoration: none;}.nav li a:hover {position: relative;top: -4px;border-top: 4px solid gold;}p {width: 200px;height: 200px;border: 1px solid red;font: 18px/36px "微软雅黑";text-indent: 2em;}span {font-size: 12px;position: relative;top: -5px;}</style>
</head>
<body><ul class="nav"><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li><li><a href="#">首页</a></li></ul><p>位置<span>[1]</span>  内偶然</p>
</body>
</html>

效果展示

2.绝对定位absolute

参考距离最近的祖先元素。
性质：脱离标准流会让出标准流位置，可以设置宽高，随时定义位置。


.box .para{     position: absolute; top: 100px;left: 100px;background: yellowgreen;}

以body为参考元素，top参考点是左上角和y右上角，bottom首屏左下顶点和右下顶点。（少用body，分辨率不同，位置会变化）

3.绝对定位absolute

参考距离最近的祖先元素。
性质：脱离标准流会让出标准流位置，可以设置宽高，随时定义位置。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.box1{position: relative;width: 400px;height: 400px;padding: 50px;border: 10px solid #f00;margin: 100px;}.box2{position: absolute;width: 280px;height: 280px;padding: 50px;border: 10px solid #0f0;}.box3{position: fixed;width: 160px;height: 160px;padding: 50px;border: 10px solid #00f;}p{position: absolute;/* left: 30px;top: 30px; */bottom: -30px;right: -30px;width: 60px;height: 60px;background-color: gold;}</style>
</head>
<body><div class="box1"><div class="box2"><div class="box3"><p></p></div></div></div>
</body>
</html>

三种定位组合方式：子绝父相、子绝父绝，子绝父固

4.固定定位fixed

参考点：浏览器窗口的四个顶点。
性质：脱离标准流，让出标准流位置，始终显示在浏览器窗口上。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}div{width: 300px;height: 300px;margin-bottom: 10px;background-color: skyblue;}.backtop  {position: fixed;right: 100px;bottom: 100px;width: 100px;height: 50px;background-color: #ccc;font: 18px/50px "微软雅黑";text-align: center;color: #000;text-decoration: none;}</style>
</head>
<body><a href="#" class="backtop">顶部</a><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</body>
</html>

5.定位应用

（1）压盖效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.box{position: relative;width: 440px;border: 10px solid #f00;}.box p{position: absolute;top: 100px;left: 100px;width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="box"><img src="data:images/meng.jpg" alt=""><p></p></div>
</body>
</html>

（2）居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.box{position: relative;width: 440px;border: 10px solid #f00;margin: 0 auto;}.box p{position: absolute;left: 50%;top: 50px;width: 600px;height: 100px;margin-left: -300px;background-color: pink;}.box1 {width: 400px;height: 100px;border: 1px solid #000;margin: 50px auto;}.box1 p {position: relative;left: 50%;width: 800px;height: 100px;margin-left: -400px;background-color: pink;}</style>
</head>
<body><div class="box"><img src="data:images/meng.jpg" alt=""><p></p></div><div class="box1"><p></p></div>
</body>
</html>

6.压盖顺序

默认压盖顺序：定位的元素不区分定位类型，都会压盖标准流或者浮动的元素。后写的定位会压盖先写的定位。
自定义压盖书序：z-index属性，属性值是数字，数字越大会压盖数字小的。只给定位了的元素，z-index才会生效。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.father{position: absolute;left: 0;top: 0;width: 200px;height: 200px;border: 10px solid #f00;z-index: 2;}.son{position: absolute;left: 0;top: 0;width: 150px;height: 150px;background-color: pink;z-index: 5;}.fuqin{position: absolute;left: 0;top: 0;width: 200px;height: 200px;border: 10px solid #0f0;z-index: 4;}.erzi{position: absolute;left: 0;top: 0;width: 100px;height: 100px;background-color: skyblue;z-index: 4;}</style>
</head>
<body><div class="father"><div class="son"></div></div><div class="fuqin"><div class="erzi"></div></div>
</body>
</html>

效果展示：

总结

今天主要学习了背景和定位，想要很好的掌握这部分，还是需要多多练习啊。坚持学习前端！

CSS背景属性、定位相关推荐

  1. 前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性

    CSS伪类选择器:给超链接加的样式(链接的不同状态加样式) 一个超链接,有四个状态: 正常状态(:link):鼠标没放上去之前的样式: 放上状态(:hover):鼠标放到链接上时的样式: 激活状态(: ...

  2. html中页面背景属性,css背景属性有哪些？

    css背景属性有哪些?下面本篇文章给大家带来关于css背景属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css背景属性有哪些?background简写属性,作用是将背景 ...

  3. CSS背景图片定位(background-position,css sprit,背景定位,background-imag

    CSS背景图片定位(background-position,css sprit,背景定位,background-imag 标签: 杂谈 分类: css 在CSS中,背景图片的定位方位有3种: 1)关键 ...

  4. 零基础学习CSS---05.CSS背景属性详解

    CSS属性 一.背景属性 1.background-color(背景颜色):red: 2.background-image(背景图片):background-image:url(图片地址); 3.ba ...

  5. 【CSS 背景属性 background】

    CSS 背景属性 background CSS 背景属性 1. background 属性: 一次性 集中定义 8个 背景相关属性 2. background-color 属性: 元素的 背景颜色 ( ...

  6. 用dw中html设置背景,Dreamweaver 教程-CSS背景属性(background)

    但凡正规的网站在设计时都会注重网页背景的使用,一个好的网页背景与整体设计是息息相关的.下面我们就来讲讲一些常用的CSS背景属性. 1.背景颜色属性(background-color)body { ba ...

  7. HTML5 - CSS背景属性、与CSS三大特性描述

    文章目录 CSS的背景 背景颜色 背景图片 背景平铺 背景图片位置 设置超大图片为背景小案例 获取网页图片中小技巧 背景图像固定(背景附着) 复合属性 背景色半透明 注意 CSS背景总结(表格) CS ...

  8. 4.CSS 背景属性

    文章目录 1.背景颜色 2.背景图片 3.背景平铺属性 3.1应用场景 4.背景定位属性 4.1背景定位属性(值:单词) 4.2背景定位属性(值:数值) 4.3应用场景 5.背景图片关联方式 6.背景 ...

  9. CSS背景属性彻底研究

    ☆ 背景颜色属性(background-color) 这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性. body {background-color:#99FF00;} 上面的 ...

最新文章

  1. Linux中逻辑卷相关知识简介
  2. JVM学习笔记（二）------Java代码编译和执行的整个过程
  3. php curl 404,PHP使用curl判断404(网页是否存在)方法
  4. Android 自定义WebView 实现可以加载缓存数据
  5. 互联网1分钟 | 0321 小米上线“朕惊视频”；依图医疗与华为联合发布智能医疗云...
  6. GF(2^8)上的多项式乘法(Matlab实现)
  7. php点击按钮显示隐藏代码,jQuery中点击按钮实现显示与隐藏的方法
  8. aws s3 獲取所有文件_AWS SA associate 证书考试学习记录-EBS，S3，EFS比较
  9. 【C语言】输出半径1到10的圆的面积，当面积值超过100时，停止执行本程序
  10. java对mysql的简单操作的综合运用——登录+注册+修改密码
  11. 【原】行内元素产生水平空隙是bug吗
  12. IQ数据简介：I/Q Data
  13. java怎么实现直方图均衡化_直方图均衡化原理与实现
  14. java 机器学习库_7个最好的Java机器学习开发库
  15. 支付宝扫码枪收银的实现原理你了解吗？
  16. 数学小故事之 被柯西坑了的两个天才数学家——阿贝尔和伽罗瓦
  17. 如何写好一篇技术文章？
  18. 移动硬盘无法被识别怎么办?
  19. matlab神经网络工具箱实现两个输入的BP神经网络
  20. Adapter适配器与具体应用

热门文章

  1. die_visual
  2. E575: viminfo: 无效的启动字符 位于
  3. 二叉树遍历（递归、非递归）
  4. js 中的 exec（ ）方法
  5. 玩转Openwrt（二） — 配合Android手机打造无线音乐播放器
  6. 机器学习项目泰坦尼克号问题陈述
  7. ArcGIS API for JavaScript 图层顺序
  8. C语言 计算斐波那契数列
  9. jQuery遍历对象/数组/集合
  10. 华为p10 android几,华为P10测评：市场上真心没有比华为更强劲的安卓机了