CSS3之background属性
background:
作用：
在一个声明中设置所有的背景属性
说明：
可以设置的属性分别是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image，如果上述值缺少一个，这不要紧，例如background：＃FF0000 URL（smiley.gif）;是允许的
background-color:
作用：
设置一个元素的背景颜色
说明：
元素的背景是元素的总大小，包括填充和边界 （但不包括边距）
常用值：
(color)： 指定背景颜色
(transparent)： 指定背景颜色应该是透明的
代码示例：
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之background属性title>
<style type="text/css">
body {
background: url(img/trees.JPG);
background-size: cover;
}
#showdiv {
width: 900px;
height: 900px;
margin: 10px auto;
}
.demodiv {
margin: 24px;
width: 400px;
height: 400px;
float: left;
border-radius: 10px;
}
#showdiv1 {
background-color: mediumpurple;
}
#showdiv2 {
background-color: rgba(255, 255, 255, 0.5);
}
#showdiv3 {
}
#showdiv4 {
}
style>
head>
<body>
<div id="showdiv">
<div id="showdiv1" class="demodiv">div>
<div id="showdiv2" class="demodiv">div>
<div id="showdiv3" class="demodiv">div>
<div id="showdiv4" class="demodiv">div>
div>
body>
html>
background-position:
作用：
设置背景图像的起始位置，默认在容器的左上角
说明：
在使用此属性之前，先使用background-image属性获得背景，这个工作在Firefox和Opera，background-attachment必须设置为 "fixed （固定）"
语法：
background-position : length || length 或者 background-position : position || position
注意：
1.必须先指定background-image属性
2.position 后面是x坐标 和 y坐标，可以使用方位名词或者精确单位
3.如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
4.如果只指定了一个方位名词，另一个值默认居中对齐
5.如果position后面是精确坐标， 那么第一个是 x ，第二个是y
6.如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
7.如果指定的两个值是精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
代码示例：
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之background属性title>
<style type="text/css">
body {
background: url(img/trees.JPG);
background-size: cover;
}
#showdiv {
width: 900px;
height: 900px;
margin: 10px auto;
}
.demodiv {
margin: 24px;
width: 400px;
height: 400px;
float: left;
border: 1px solid;
border-radius: 10px;
background-image: url(./img/ironMan-square-small.JPG);
background-repeat: no-repeat;
}
#showdiv1 {
background-position: center center;
}
#showdiv2 {
background-position: -30px 30px;
}
#showdiv3 {
background-position: 0 center;
}
#showdiv4 {
background-position: 50px;
}
style>
head>
<body>
<div id="showdiv">
<div id="showdiv1" class="demodiv">div>
<div id="showdiv2" class="demodiv">div>
<div id="showdiv3" class="demodiv">div>
<div id="showdiv4" class="demodiv">div>
div>
body>
html>
background-size:
作用：
指定背景图片大小，默认** 大小
说明：
在使用此属性之前，先使用background-image属性获得背景**
常用值：
(NUMBER)： 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为auto (自动)
(cover)： 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
(contain)： 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小
代码示例：
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之background属性title>
<style type="text/css">
body {
background: url(img/trees.JPG);
background-size: cover;
}
#showdiv {
width: 900px;
height: 900px;
margin: 10px auto;
}
.demodiv {
margin: 24px;
width: 400px;
height: 400px;
float: left;
border: 1px solid;
border-radius: 10px;
background-image: url(./img/nightsky.JPG);
background-repeat: no-repeat;
}
#showdiv1 {
background-size: cover;
}
#showdiv2 {
background-size: contain;
}
#showdiv3 {
}
#showdiv4 {
}
style>
head>
<body>
<div id="showdiv">
<div id="showdiv1" class="demodiv">div>
<div id="showdiv2" class="demodiv">div>
<div id="showdiv3" class="demodiv">div>
<div id="showdiv4" class="demodiv">div>
div>
body>
html>
background-repeat:
作用：
设置如何平铺对象的background-image属性
说明：
在使用此属性之前，先使用background-image属性获得背景，默认情况 下，重复 background-image的 垂直 和 水平 方向
常用值：
(repeat)：默认值，背景图像在纵向和横向上平铺
(no-repeat)： 背景图像不平铺
(repeat-x)： 背景图像在横向平铺
(repeat-y)： 背景图像在纵向平铺
代码示例：
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之background属性title>
<style type="text/css">
body {
background: url(img/trees.JPG);
background-size: cover;
}
#showdiv {
width: 900px;
height: 900px;
margin: 10px auto;
}
.demodiv {
margin: 24px;
width: 400px;
height: 400px;
float: left;
border: 1px solid;
border-radius: 10px;
background-image: url(./img/ironMan-square-small.JPG);
}
#showdiv1 {
background-repeat: no-repeat;
}
#showdiv2 {
background-repeat: repeat-x;
}
#showdiv3 {
background-repeat: repeat-y;
}
#showdiv4 {
}
style>
head>
<body>
<div id="showdiv">
<div id="showdiv1" class="demodiv">div>
<div id="showdiv2" class="demodiv">div>
<div id="showdiv3" class="demodiv">div>
<div id="showdiv4" class="demodiv">div>
div>
body>
html>
background-attachment:
作用：
设置背景图像是否固定或者随着页面的其余部分滚动
说明：
在使用此属性之前，先使用 background-image属性获得背景
常用值：
(scroll)：默认值，背景图片随着页面的滚动而滚动 (与使用background属性的元素绑定)
(fixed)： 背景图片不会随着页面的滚动而滚动 （与body绑定）
(local)： 背景图片会随着元素内容的滚动而滚动 （与使用background属性的元素中的内容绑定）
代码示例：
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之background属性title>
<style type="text/css">
body {
background: url(img/trees.JPG);
overflow: auto;
}
#showspan {
color: transparent;
line-height: 30px;
}
#showdiv {
width: 900px;
height: 900px;
margin: 70px auto;
}
.demodiv {
margin: 24px;
width: 400px;
height: 400px;
float: left;
color: white;
font: normal bold 16px 宋体;
letter-spacing: 5px;
text-align: center;
line-height: 35px;
border: 1px solid;
border-radius: 10px;
overflow: auto;
background-repeat: no-repeat;
}
#showdiv1 {
background-image: url(./img/ironMan-square.JPG);
background-size: cover;
background-attachment: scroll;
}
#showdiv2 {
background-image: url(./img/ironMan.JPG);
background-size: cover;
background-attachment: fixed;
}
#showdiv3 {
background-image: url(./img/ironMan-orthogon.JPG);
background-size: contain;
background-attachment: local;
}
#showdiv4 {
display: none;
}
style>
head>
<body>
<div id="showdiv">
<div id="showdiv1" class="demodiv">
长太息以掩涕兮，哀民生之多艰。<br/>余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>既替余以蕙纕兮，又申之以揽茝。<br/>亦余心之所善兮，虽九死其犹未悔。<br/>怨灵修之浩荡兮，终不察夫民心。<br/>众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>固时俗之工巧兮，偭规矩而改错。<br/>背绳墨以追曲兮，竞周容以为度。<br/>忳郁邑余侘傺兮，吾独穷困乎此时也。<br/>宁溘死以流亡兮，余不忍为此态也！<br/>鸷鸟之不群兮，自前世而固然。<br/>何方圜之能周兮？夫孰异道而相安？<br/>屈心而抑志兮，忍尤而攘诟。<br/>伏清白以死直兮，固前圣之所厚。<br/>悔相道之不察兮，延伫乎吾将反。<br/>回朕车以复路兮，及行迷之未远。<br/>步余马于兰皋兮，驰椒丘且焉止息。<br/>进不入以离尤兮，退将复修吾初服。<br/>制芰荷以为衣兮，集芙蓉以为裳。<br/>不吾知其亦已兮，苟余情其信芳。<br/>高余冠之岌岌兮，长余佩之陆离。<br/>芳与泽其杂糅兮，唯昭质其犹未亏。<br/>忽反顾以游目兮，将往观乎四荒。<br/>佩缤纷其繁饰兮，芳菲菲其弥章。<br/>民生各有所乐兮，余独好修以为常。<br/>虽体解吾犹未变兮，岂余心之可惩？<br/>女嬃之婵媛兮，申申其詈予，<br/>曰：“鲧婞直以亡身兮，终然夭乎羽之野。<br/>汝何博謇而好修兮，纷独有此姱节？<br/>薋菉葹以盈室兮，判独离而不服。”<br/>众不可户说兮，孰云察余之中情？<br/>世并举而好朋兮，夫何茕独而不予听？<br/>依前圣以节中兮，喟凭心而历兹。<br/>济沅、湘以南征兮，就重华而敶词：<br/>启《九辩》与《九歌》兮，夏康娱以自纵。<br/>
div>
<div id="showdiv2" class="demodiv">
长太息以掩涕兮，哀民生之多艰。<br/>余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>既替余以蕙纕兮，又申之以揽茝。<br/>亦余心之所善兮，虽九死其犹未悔。<br/>怨灵修之浩荡兮，终不察夫民心。<br/>众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>固时俗之工巧兮，偭规矩而改错。<br/>背绳墨以追曲兮，竞周容以为度。<br/>忳郁邑余侘傺兮，吾独穷困乎此时也。<br/>宁溘死以流亡兮，余不忍为此态也！<br/>鸷鸟之不群兮，自前世而固然。<br/>何方圜之能周兮？夫孰异道而相安？<br/>屈心而抑志兮，忍尤而攘诟。<br/>伏清白以死直兮，固前圣之所厚。<br/>悔相道之不察兮，延伫乎吾将反。<br/>回朕车以复路兮，及行迷之未远。<br/>步余马于兰皋兮，驰椒丘且焉止息。<br/>进不入以离尤兮，退将复修吾初服。<br/>制芰荷以为衣兮，集芙蓉以为裳。<br/>不吾知其亦已兮，苟余情其信芳。<br/>高余冠之岌岌兮，长余佩之陆离。<br/>芳与泽其杂糅兮，唯昭质其犹未亏。<br/>忽反顾以游目兮，将往观乎四荒。<br/>佩缤纷其繁饰兮，芳菲菲其弥章。<br/>民生各有所乐兮，余独好修以为常。<br/>虽体解吾犹未变兮，岂余心之可惩？<br/>女嬃之婵媛兮，申申其詈予，<br/>曰：“鲧婞直以亡身兮，终然夭乎羽之野。<br/>汝何博謇而好修兮，纷独有此姱节？<br/>薋菉葹以盈室兮，判独离而不服。”<br/>众不可户说兮，孰云察余之中情？<br/>世并举而好朋兮，夫何茕独而不予听？<br/>依前圣以节中兮，喟凭心而历兹。<br/>济沅、湘以南征兮，就重华而敶词：<br/>启《九辩》与《九歌》兮，夏康娱以自纵。<br/>
div>
<div id="showdiv3" class="demodiv">
长太息以掩涕兮，哀民生之多艰。<br/>余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>既替余以蕙纕兮，又申之以揽茝。<br/>亦余心之所善兮，虽九死其犹未悔。<br/>怨灵修之浩荡兮，终不察夫民心。<br/>众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>固时俗之工巧兮，偭规矩而改错。<br/>背绳墨以追曲兮，竞周容以为度。<br/>忳郁邑余侘傺兮，吾独穷困乎此时也。<br/>宁溘死以流亡兮，余不忍为此态也！<br/>鸷鸟之不群兮，自前世而固然。<br/>何方圜之能周兮？夫孰异道而相安？<br/>屈心而抑志兮，忍尤而攘诟。<br/>伏清白以死直兮，固前圣之所厚。<br/>悔相道之不察兮，延伫乎吾将反。<br/>回朕车以复路兮，及行迷之未远。<br/>步余马于兰皋兮，驰椒丘且焉止息。<br/>进不入以离尤兮，退将复修吾初服。<br/>制芰荷以为衣兮，集芙蓉以为裳。<br/>不吾知其亦已兮，苟余情其信芳。<br/>高余冠之岌岌兮，长余佩之陆离。<br/>芳与泽其杂糅兮，唯昭质其犹未亏。<br/>忽反顾以游目兮，将往观乎四荒。<br/>佩缤纷其繁饰兮，芳菲菲其弥章。<br/>民生各有所乐兮，余独好修以为常。<br/>虽体解吾犹未变兮，岂余心之可惩？<br/>女嬃之婵媛兮，申申其詈予，<br/>曰：“鲧婞直以亡身兮，终然夭乎羽之野。<br/>汝何博謇而好修兮，纷独有此姱节？<br/>薋菉葹以盈室兮，判独离而不服。”<br/>众不可户说兮，孰云察余之中情？<br/>世并举而好朋兮，夫何茕独而不予听？<br/>依前圣以节中兮，喟凭心而历兹。<br/>济沅、湘以南征兮，就重华而敶词：<br/>启《九辩》与《九歌》兮，夏康娱以自纵。<br/>
div>
<div id="showdiv4" class="demodiv">div>
div>
<span id="showspan">
余<br/>虽<br/>好<br/>修<br/>姱<br/>以<br/>鞿<br/>羁<br/>兮<br/>，<br/>謇<br/>朝<br/>谇<br/>而<br/>夕<br/>替
span>
body>
html>
第一个div属性为scroll：
第二个div属性为fixed：
第三个div属性为local
第二个div的效果：
background-image:
作用：
设置一个元素的背景图像
说明：
元素的背景是元素的总大小，包括填充和边界 （但不包括边距），默认情况下，background-image放置 在元素的 左上角，并重复 垂直 和 水平 方向
常用值：
(url(URL))： 图像的URL
(none)：默认值，无图像背景会显示
关于渐变详见：这里！！！
代码示例：
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之background属性title>
<style type="text/css">
#showdiv {
width: 400px;
height: 400px;
margin: 100px auto;
background-image: url(img/globe2.JPG);
background-size: cover;
}
style>
head>
<body>
<div id="showdiv">div>
body>
html>
渐变，代码示例：
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3之background属性title>
<style type="text/css">
.show {
margin: 20px 0 20px 0;
height: 150px;
border: 1px solid gray;
}
.show1 {
display: inline-block;
margin: 5px;
height: 150px;
width: 195px;
border: 1px solid gray;
}
/* 线性渐变 */
#showdiv1 {
/* 默认从上到下渐变 */
background: linear-gradient(red, blue);
}
#showdiv2 {
/* 向右渐变 */
background: linear-gradient(to right, red, blue);
}
#showdiv3 {
/* 向右下渐变 */
background: linear-gradient(to bottom right, red, yellowgreen);
}
#showdiv4 {
/* 自定义角度渐变 角度是指水平线和渐变线之间的角度，逆时针方向计算 */
/*请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度*/
background: linear-gradient(170deg, red, blue);
}
#showdiv5 {
/* 多个颜色结点 */
background: linear-gradient(60deg, red, orange, yellow, green, cyan, blue, purple);
}
#showdiv6 {
/* 多个颜色结点 */
background: linear-gradient(to right, rgba(255, 0, 0, 0.3), rgba(0, 255, 0, 0.3));
}
#showdiv7 {
/* 重复多个颜色结点 */
background: repeating-linear-gradient(red, orange 10%, green 20%, yellow 10%);
}
/* 径向渐变 */
#showdiv8 {
/* 基本径向渐变，椭圆形，向最远的角，在图形中心点 */
background: radial-gradient(red, orange, yellow, green, cyan, blue, purple);
}
#showdiv9 {
/* 圆形径向渐变，指定径向渐变的半径长度为从圆心到离圆心最远的角，在图形中心点 */
background: radial-gradient(circle, red, orange, yellow, green, cyan, blue, purple);
}
#showdiv10 {
/* 圆形径向渐变，指定径向渐变的半径长度为从圆心到离圆心最近的边，在图形中心点 */
background: radial-gradient(circle closest-side, red, orange, yellow, green, cyan, blue, purple);
}
#showdiv11 {
/* 椭圆形径向渐变，指定径向渐变的半径长度为从圆心到离圆心最近的角 */
background: radial-gradient(ellipse closest-corner, red, orange, yellow, green, cyan, blue, purple);
}
#showdiv12 {
/* 椭圆形径向渐变，指定径向渐变的半径长度为从圆心到离圆心最远的边 */
background: radial-gradient(circle farthest-side, red, orange, yellow, green, cyan, blue, purple);
}
#showdiv13 {
/* 圆形径向渐变，中心点位置改变 */
background: radial-gradient(circle farthest-side at bottom, red, orange, yellow, green, cyan, blue, purple);
}
#showdiv14 {
/* 多重圆形径向渐变，中心点位置改变 */
background: repeating-radial-gradient(red, yellow 15%, green 25%);
}
#showdiv14 {
/* 多重圆形径向渐变，中心点位置改变 */
background: repeating-radial-gradient(red, yellow 15%, green 25%);
}
/* 渐变字体需要设置以下三个属性，但是兼容问题有待解决,!important并非必要，视具体情况而定 */
span {
display: block;
text-align: center;
font: normal 400 200px/400px "Microsoft JhengHei UI Light";
color: transparent;
-webkit-background-clip: text;
background-image: radial-gradient(#FE8537, #2AD396, #85BB1F, #00C2AB, #3E94FF, #45CAFF, #1471FB);
}
style>
head>
<body>
<div id="showdiv1" class="show">div>
<div id="showdiv2" class="show">div>
<div id="showdiv3" class="show">div>
<div id="showdiv4" class="show">div>
<div id="showdiv5" class="show">div>
<div id="showdiv6" class="show">div>
<div id="showdiv7" class="show">div>
<div id="showdiv8" class="show1">div>
<div id="showdiv9" class="show1">div>
<div id="showdiv10" class="show1">div>
<div id="showdiv11" class="show1">div>
<div id="showdiv12" class="show1">div>
<div id="showdiv13" class="show1">div>
<div id="showdiv14" class="show1">div>
<hr>
<span>Iphone XSspan>
body>
html>