042 - 道可道，非常道（上）
本帖最后由 不二如是 于 2020-4-9 17:47 编辑上一集： 041 - 翩若惊鸿 宛若游龙
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
素材包（可不下载，自己准备）：
本讲主要是叫我们如何在页面中加载背景图。
一般都会将 background-color 和 background-image 属性连用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FishC</title>
<style>
body {
background-image: url('img/bc.jpg');
background-color: #cccccc;
}
</style>
</head>
<body>
<p>道可道，非常道</p>
</body>
</html>
接下里都会直接在 style 中写样式，上面的页面代码保持不变，效果：
background-color 属性设置一个元素的背景颜色，往往用来当作“备”景色。
当 background-image 属性加载图像失效后，显示背景色。
不管二者顺序如何，浏览器都会默认用：
**** Hidden Message *****
从上面图中我们看到当页面拉到比背景图尺寸大时，会自动重复覆盖。
如果不需要 repeat，就可以添加属性：
body {
background-repeat: repeat-y;
}
此时效果：
水平方向的重复就被取消了。
如果想取消默认的重复，可以设置为：
background-repeat: no-repeat;
效果：
更多值请参看速查宝典：传送门
background-position 属性设置背景图像的起始位置。
默认情况下，背景图像都是从元素 padding 区域的左上角开始出现的。
但有时我们需要背景能够出现在任何位置。
通过 background-position属性，可以很轻松的控制背景图像在对象的背景区域中的起始显示位置。
语法格式为：
background-position: xpos ypos | x% y% | x y
支持 4 个参数值，前两个值用于横坐标，后两个值用于纵坐标。
这意味着我们可以相对于上左下右任意一个角落定位，而不是之前只能相对于左上角定位。可以用长度值、或百分比来指定背景图像的起始位置。
如果只提供一个值，则第二个值为center 。
如果提供两个值，第一个长度或百分比表示水平偏移，第二个长度或百分比表示垂直偏移。
长度或百分比，表示背景图像的左上角相对于背景位置区域左上角的偏移。
下面几个声明给出了背景的起点相对于背景区域左上角的偏移：
background-position: left 10px top 15px; /* 10px, 15px */
background-position:left top; /*0px,0px */
background-position:10px 15px; /* 10px, 15px */
background-position:left 15px; /*0px, 15px */
background-position:10px top; /* 10px,0px */
background-position:left top 15px; /*0px, 15px */
background-position:left 10px top; /* 10px,0px */
效果：
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：043 - 道可道，非常道（下）
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 我爱鱼C，我爱Web web开发又出新课程了吗？？？？？ 辛苦啦 希望继续更新 我爱鱼C，我爱Web 我爱鱼C，我爱Web 我爱鱼C才怪，我爱Web(真的{:10_279:}) Mike_python小 发表于 2020-4-10 10:42
我爱鱼C才怪，我爱Web(真的)
？？？ 我爱鱼C，我爱Web 我爱鱼C，我爱Web 我爱鱼C，我爱Web 我爱鱼C，我爱Web 我爱鱼C，我爱Web 我爱鱼C，我爱Web 我爱鱼C，我爱Web 我爱鱼C，我爱Web 老师，在视频里background-repeat的属性值提到了space，在速查宝典里漏了哦 https://man.ilovefishc.com/pageCSS3/background-repeat.html s's's 想看 background-image
页:
[1]
2