添加多个CSS背景的方法

更新时间：2021-08-27 11:07:26 来源：动力节点浏览1608次

CSS 多背景

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;
}

CSS 背景大小

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;
}

CSS background-origin 属性

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;
}

CSS background-clip 属性

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编程，感兴趣的同学可以关注一下。

CSS教程

上一篇CSS图片更改大小下一篇CSS字体样式

添加多个CSS背景的方法

CSS 多背景

CSS 背景大小

定义多个背景图像的大小

全尺寸背景图像

CSS background-origin 属性

CSS background-clip 属性

JVM

多线程下载器项目实战

Java日志框架全集（选学）

高并发解决方案（选学）

零基础能学Java吗？

零基础能学Java吗？

零基础能学Java吗？