Java培训机构logo图

首页 课程 师资 教程 报名

添加多个CSS背景的方法

  • 2021-08-27 11:07:26
  • 230次 动力节点

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

选你想看

你适合学Java吗?4大专业测评方法

代码逻辑 吸收能力 技术学习能力 综合素质

先测评确定适合在学习

在线申请免费测试名额
价值1998元实验班免费学
姓名
手机
提交