前言

系列文章目录：

[目录]HTML CSS JS

根据视频和PPT整理

视频及对应资料：

HTML CSS
老师笔记： https://gitee.com/xiaoqiang001/html_css_material.git

视频：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程

视频对应资源

链接：【https://pan.baidu.com/s/1k1dpC6iGA93c6gVsUvPqYw】

提取码：1234

【GitHub 仓库链接】

文章目录

前言

1 背景颜色

2 背景图片

3 背景平铺

4 背景图片位置

4.1 方位名词

4.2 精确单位

4.3 混合单位

5 背景图像固定（背景附着）

6 背景复合写法

7 背景色半透明

8 背景总结

CSS 背景属性，可以给页面元素添加背景样式。可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1 背景颜色

background-color 属性定义了元素的背景颜色。

语法：
默认值为：transparent（透明）
颜色值可以为：颜色单词 | 十六进制 | rgb值 | rgba值

background-color: 颜色值;

<body><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div><div class="demo5"></div>
</body>

  <style>div {display: inline-block;width: 100px;height: 100px;border: 1px black solid}.demo1 {/* 默认值 */background-color: transparent;}.demo2 {/* 颜色单词 */background-color: red;}.demo3 {/* 十六进行 */background-color: #6666f3;}.demo4 {/* rgb值 */background-color: rgb(221, 85, 85);}.demo5 {/* rgba值  最后一个值为透明度 */background-color: rgba(245, 4, 4, 0.3);}</style>

2 背景图片

background-image 属性可以设置元素的背景图像。

语法：

background-image : none | url (url)

取值：

none：无背景图片
url(url)：背景图片的路径

背景图片后面的地址，千万不要忘记加 url()，同时里面的路径不要加引号。

<body><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div>
</body>

  <style>div {display: inline-block;width: 300px;height: 300px;border: 1px solid black;}.demo1 {background-image: none;}.demo2 {background-image: url(./pic.jpeg);}.demo3 {/* 在设置背景图片的同时可以设置背景颜色 */background-color: aqua;background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);}</style>

3 背景平铺

在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

语法：

background-repeat: repeat | no-repeat | repeat-x | repeat-y

repeat：背景图片在纵向和横向上平铺(默认值)
no-repeat：背景图片在纵向和横向上都不平铺
repeat-x：背景图片在横向上平铺
repeat-y：背景图片在纵向上平铺

<body><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div><div class="demo5"></div>
</body>

  <style>div {display: inline-block;width: 400px;height: 200px;border: 1px solid black;}.demo1 {background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);}.demo2 {background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: repeat;}.demo3 {background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: no-repeat;}.demo4 {background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: repeat-x;}.demo5 {background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: repeat-y;}</style>

4 背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

语法：

background-position: x y;

x：横方向
y：纵方向

可以使用方位名词或者精确单位

x：left | center | right
y：top | center | bottom

4.1 方位名词

  <div class="demo1"></div>

    div {display: inline-block;width: 400px;height: 200px;border: 1px solid black;}.demo1 {background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: no-repeat;background-position: center center;}

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致，因为对于横向是left | center | right，对于纵向是top | center | bottom，可以根据单词区分出横向和纵向。

  <div class="demo2"></div><div class="demo3"></div>

    .demo2 {background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: no-repeat;background-position: left top;}.demo3 {background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: no-repeat;background-position: top left;}

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
指定横向：

  <div class="demo4"></div>

    .demo4 {background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: no-repeat;background-position: left;}

指定纵向：

  <div class="demo4"></div>

    .demo5 {background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: no-repeat;background-position: bottom;}

4.2 精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

  <div class="demo1"></div><div class="demo2"></div><div class="demo3"></div><div class="demo4"></div>

  <style>div {display: inline-block;width: 400px;height: 200px;border: 1px solid black;background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: no-repeat;}.demo1 {background-position: 50px 20px;}.demo2 {background-position: 20px 50px;}.demo3 {background-position: 20px;}.demo4 {background-position: 50px;}</style>

4.3 混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

  <div class="demo1"></div><div class="demo2"></div>

  <style>div {display: inline-block;width: 400px;height: 200px;border: 1px solid black;background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);background-repeat: no-repeat;}.demo1 {background-position: 20px top;}.demo2 {background-position: right 30px;}</style>

5 背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

语法：

background-attachment : scroll | fixed

scroll 背景图片随内容滚动(默认)
fixed 背景固定

<body><p>hello</p><p>hello</p><p>hello</p>...
</body>

  <style>body {background-image: url(../bg2.jpg);background-repeat: no-repeat;}</style>

  <style>body {background-image: url(../bg2.jpg);background-repeat: no-repeat;background-attachment: scroll;}</style>

  <style>body {background-image: url(../bg2.jpg);background-repeat: no-repeat;background-attachment: fixed;}</style>

6 背景复合写法

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

<body><p>hello</p><p>hello</p><p>hello</p>...
</body>

  <style>body {background: yellowgreen url(../bg2.jpg) no-repeat scroll center top;}</style>

7 背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

语法：

background: rgba(0, 0, 0, 0.3);

最后一个参数是 alpha 透明度，取值范围在 0~1之间
我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3 新增属性，是 IE9+ 版本浏览器才支持的

<body><div class="demo1"><h1>hello</h1></div><div class="demo2"><h1>hello</h1></div><div class="demo3"><h1>hello</h1></div>
</body>

  <style>body {background-image: url(../bg2.jpg);}div {width: 200px;height: 200px;background-color: blue;}.demo2 {background-color: rgba(0, 0, 255, 0.3);}.demo3 {background-color: rgba(0, 0, 255, .3);}</style>

8 背景总结

背景图片:实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

[CSS]CSS 的背景相关推荐

22.CSS边框与背景【上】
第十七章 CSS边框与背景[上] 一.声明边框属性值说明 CSS版本 1.border-width ...
php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
[09]CSS 边框与背景 (上)
一．声明边框 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 边框的声明有三个属性设置,样式表如下: 属性值说明 CSS 版本 border-width 长 ...
[css] 如何设置背景图片不随着文本内容的滚动而滚动？
[css] 如何设置背景图片不随着文本内容的滚动而滚动? 直接对div设置background:url不就好了嘛?上代码.<!DOCTYPE html> <html lang=&qu ...
[css] 如何让背景图片固定不随滚动条滚动
[css] 如何让背景图片固定不随滚动条滚动 background-attachment:fixed 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 ...
[css] 使用css如何设置背景虚化？
[css] 使用css如何设置背景虚化? filter: blur(5px); 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关 ...
vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .all_bg { background: url(../imag ...
html背景图片垂直居中,css — 定位、背景图、水平垂直居中
css - 定位.背景图.水平垂直居中目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; s ...
怎么把html背景图片,css如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...
css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性关于背景涉及到背景颜色与背景图片背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

[CSS]CSS 的背景

前言

文章目录