042 - 道可道，非常道（上）

不二如是 · 发表于 2020-3-17 09:23:28

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-4-9 17:47 编辑

上一集： 041 - 翩若惊鸿宛若游龙

哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

素材包（可不下载，自己准备）：

bc.zip (249.91 KB, 下载次数: 20, 售价: 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 */

复制代码

效果：

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：043 - 道可道，非常道（下）

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅淘专辑（传送门）（不喜欢更要订阅

）

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 042 - 道可道，非常道（上）

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

浏览过的版块