1.background-color背景色的详解
2.background-image背景图的详解
3.background-repeat背景重复的详解
4.background-attachment背景是否滚动的设置
5.background-position背景定位的详解
6.背景的复合属性讲解

今天简单的梳理了一下有关于background的笔记，另外，大家写页面，用到图标、图片等，可以自己学一下利用PS软件进行简单的切图，另外给大家推荐一款PS特别好用的插件——蓝湖，利用它，可以很方便的抠图，量尺寸等，有兴趣的可以学习了解一下，我也只会简单的切图。好的，下面进入正题。

1.background-color背景色的详解

background-color : 设置或检索对象的背景颜色，默认值：transparent；
同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上

2.background-image背景图的详解

background-image: 设置或检索对象的背景图像，默认值：none；
如果设置了 ’ background-image ‘，同时也建议设置 ’ background-color ‘ 用于当背景图像不可见时保持与文本颜色有一定的对比度。
如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。

3.background-repeat背景重复的详解

background-repeat: 设置或检索对象的背景图像如何铺排填充。必须先指定 ’ background-image ‘ 属性。默认值：repeat；
允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向；
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺

4.background-attachment背景是否滚动的设置

background-attachment: 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定 ’ background-image ‘ 属性。默认值：scroll
fixed：背景图像相对于窗体固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
percentage：用百分比指定背景图像填充的位置。可以为负值。
length：用长度值指定背景图像填充的位置。可以为负值。
center：背景图像横向和纵向居中。
left：背景图像在横向上填充从左边开始。
right：背景图像在横向上填充从右边开始。
top：背景图像在纵向上填充从顶部开始。
bottom：背景图像在纵向上填充从底部开始

5.background-position背景定位的详解

background-position: 设置或检索对象的背景图像位置。必须先指定 ’ background-image ‘ 属性。该属性提供2个参数值
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）

6.背景的复合属性讲解

background: 背景颜色、背景图片、背景平铺方式、背景是否滚动、背景定位。

转载于:https://www.cnblogs.com/wangxingren/p/10050870.html

前端之路从零开始——第二周第四天笔记（background）相关推荐

【第二周】四人小组:车辆管理系统
组长:林莉组员:宫丽君,胡丽娜,王东涵项目名称:车辆管理系统项目期限:暂定十周一.需求概要在计算机网络,数据库和先进的开发平台上,利用现有的软件,配置一定的硬件,开发一个具有开发体系结构的. ...
学习java之路之第二周
目录常用的dos窗口命令盘符号的切换进入指定单个文件夹(目录) cd 目录名称进入多级目录 cd 多级目录的路径回退上一级目录 cd.. 或者cd .. 如果现在处在多级目录路径上,想回退盘 ...
第二周：四人小组项目
组长:沈柏杉组员:韩媛媛程媛媛谭力铭项目选题:幼儿园视频监控系统项目期限:暂定十周需求和功能概述: 1.活动场所实时监控:将幼儿园网络视频监控系统系统安装在孩子们的活动场所,可以最直接得了 ...
（前端学习）寒假第二周周报
本周对css进一步的学习: 附带学习视频的进度学习了: css的三大特性特性作用继承性给父元素设置一些属性,子元素也可以使用(只有以color,font-,text-,line开头的可以继承 ...
Scrum立会报告+燃尽图（Beta阶段第二周第四次）
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2412 项目地址:https://coding.net/u/wuyy694 ...
吴恩达deeplearning.ai系列课程笔记+编程作业(11)第四课卷积神经网络-第二周深度卷积网络：实例探究（Deep convolutional models: case studies）
第四门课卷积神经网络(Convolutional Neural Networks) 第二周深度卷积网络:实例探究(Deep convolutional models: case studies) ...
(秦路)七周成为数据分析师（第二周）—— 业务能力
文章目录 1.为什么业务思维重要 2.经典的业务分析指标 2.1 市场营销指标 2.1.1 生命周期 2.1.2 用户价值 2.1.3 RFM模型 2.2 产品运营指标 2.2.1 AARRR模型 2 ...
【回顾九月份第二周】前端你该知道的事儿
原链接: http://bluezhan.me/weekly/#/9-2 1.web前端 Angular vs. React vs. Vue: A 2017 comparison 9 Steps: C ...
蓝旭前端第二周预习———HTML标签+如何查看控制台
蓝旭前端第二周预习---HTML标签+如何查看控制台 HTML标签文档文档生成文档结构标签标签语法基本标签如何查看控制台(chrome) HTML标签文档文档生成 VScode中&q ...

前端之路从零开始——第二周第四天笔记（background）