专注Java教育14年
全国咨询/投诉热线：444-1124-454
更新时间：2021-08-27 11:07:26 来源：极悦 浏览1716次
CSS允许您通过background-image属性为一个元素添加多个背景图像 。
不同的背景图像用逗号分隔，图像彼此堆叠在一起，其中第一张图像最接近观看者。
以下示例有两个背景图像，第一个图像是一朵花(与底部和右侧对齐)，第二个图像是纸张背景(与左上角对齐)：
例子
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
可以使用单个背景属性(如上)或background速记属性指定多个背景图像。
以下示例使用background速记属性(结果与上例相同)：
例子
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
CSSbackground-size属性允许您指定背景图像的大小。
可以以长度、百分比或使用以下两个关键字之一指定大小：包含或覆盖。
background-size当使用多个背景时，该属性还接受背景大小的多个值(使用逗号分隔的列表)。
以下示例指定了三个背景图像，每个图像具有不同的 background-size 值：
例子
#example1 {
background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。
要求如下：
用图像填充整个页面(无空白)
根据需要缩放图像
页面中心图像
不要导致滚动条
下面的例子展示了如何做到这一点;使用<html>元素( <html>元素始终至少是浏览器窗口的高度)。然后在其上设置固定且居中的背景。然后使用 background-size 属性调整其大小：
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
CSSbackground-origin属性指定背景图像的位置。
该属性采用三个不同的值：
border-box - 背景图片从边框的左上角开始
padding-box -(默认)背景图像从填充边缘的左上角开始
content-box - 背景图片从内容的左上角开始
以下示例说明了该background-origin属性：
例子
#example1 {
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSSbackground-clip属性指定背景的绘制区域。
该属性采用三个不同的值：
border-box -(默认)背景被绘制到边框的外边缘
padding-box - 背景被绘制到填充的外边缘
content-box - 在内容框中绘制背景
以下示例说明了该background-clip属性：
例子
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
以上就是极悦小编介绍的"添加多个CSS背景的方法"，希望对大家有帮助，想了解更多可查看Java教程。极悦在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。
Java实验班
0基础 0学费 15天面授
Java就业班
有基础 直达就业
Java夜校直播班
业余时间 高薪转行
Java在职加薪班
工作1~3年，加薪神器
Java架构师班
工作3~5年，晋升架构
提交申请后，顾问老师会电话与您沟通安排学习
