background-color	背景颜色
background-image	背景图片
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景滚动还是固定

设置背景图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">body{background: url("web/img/IMG_5344.JPG");}</style>
</head>
<body>
</body>
</html>

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

背景平铺

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺

repeat-y : 　背景图像在纵向平铺

no-repeat

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">body{background: url("web/img/达也.jpg");background-repeat: no-repeat;}</style>
</head>
<body>
</body>
</html>

repeat-x：在x轴上平铺

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">body{background: url("web/img/达也.jpg");background-repeat: repeat-x;background-color: greenyellow;}</style>
</head>
<body>
</body>
</html>

repeat-y：在y轴上平铺

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">body{background: url("web/img/达也.jpg");background-repeat: repeat-y;background-color: greenyellow;}</style>
</head>
<body>
</body>
</html>

背景位置

设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">body {background: url("web/img/达也.jpg");background-repeat: no-repeat;background-color: greenyellow;background-position: 200px 300px;}</style>
</head>
<body>
</body>
</html>

100px描述的是x轴上的坐标，200px描述的是y轴上的坐标

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

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

背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">body {background: url("web/img/达也.jpg");background-repeat: no-repeat;background-color: greenyellow;background-size: 500px 500px;}</style>
</head>
<body>
</body>
</html>

2.通过设置cover使图片自适应屏幕，如有溢出部分则会被隐藏。（推荐）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">body {background: url("web/img/达也.jpg");background-repeat: no-repeat;background-color: greenyellow;background-size: cover;}</style>
</head>
<body>
</body>
</html>

HTML——背景background相关推荐

css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
html图片背景属性,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
前端开发_HTML5_CSS部分-背景(background)
背景(background) 1.引入为了更好对内容有更好的颜色搭配和设置,我们可以使用背景做一些美化效果,那么接下来我们一起学习以下背景相关的属性. 2.背景(background)相关的属性样式 ...
背景透明css样式,CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
CSS 背景background实例
css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...
CSS背景background详解，background-position详解
背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...
纯色html背景,css 背景(background)属性、背景图定位
background属性: Background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图上和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...
css里td自带什么属性,关于css标签的属性（text文本属性，背景background，表格标签table，td标签属性）...
简介这篇文章主要介绍了关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)以及相关的经验技巧,文章约1129字,浏览量216,点赞数4,值得参考! te ...

HTML——背景background