|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-4-9 17:47 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
素材包（可不下载，自己准备）：
bc.zip
(249.91 KB, 下载次数: 19, 售价: 2 鱼币)
本讲主要是叫我们如何在页面中加载背景图。
一般都会将 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 属性加载图像失效后，显示背景色。
不管二者顺序如何，浏览器都会默认用：
从上面图中我们看到当页面拉到比背景图尺寸大时，会自动重复覆盖。
如果不需要 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 */
效果：
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） |
评分
-
查看全部评分
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-3-17 09:23:28
置顶卡
千斤顶
显身卡
发表于 2020-3-17 09:28:45
发表于 2020-3-17 19:57:56
)