HTML CSS 的多重背景 – ZHUEi's 收集窝

HTML CSS 多重背景
CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。
不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。
下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：

<style> 
#example1 {
  background-image: url(/img.gif), url(/image.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>多重背景</h1>
<p>下面的 div 元素有两副背景图像：</p>

<div id="example1">
www.zhuei.com
</div>

多重背景图像可以使用单独的背景属性（如上所述）或 background 简写属性来指定。
下面的例子使用 background 简写属性（结果与上例相同）：

<style> 
#example1 {
  background: url(/img.gif) right bottom no-repeat, url(/image.jpg) left top repeat;
  padding: 15px;
}
</style>
</head>
<body>


<div id="example1">
www.zhuei.com
</div>

CSS 背景尺寸
CSS background-size 属性允许您指定背景图像的大小。
可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。
下面的例子将背景图像的大小调整为比原始图像小得多（使用像素）：

<style>
#example1 {
  border: 1px solid black;
  background: url(/img.gif);
  background-size: 100px 80px;
  background-repeat: no-repeat;
  padding: 15px;
}

#example2 {
  border: 1px solid black;
  background: url(/image.gif);
  background-repeat: no-repeat;
  padding: 15px;
}
</style>

<div id="example1">

zhuei.com</div>
<div id="example2">

www.zhuei.com</div>

background-size 的其他两个可能的值是 contain 和 cover。
contain 关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。
cover 关键字会缩放背景图像，以使内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样，背景图像的某些部分可能在背景定位区域中不可见。

定义多个背景图像的尺寸
在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）。
下面的例子指定了三幅背景图像，每幅图像有不同的 background-size 值：

<style> 
#example1 {
  background: url(/img.png) left top no-repeat, url(/image.gif) right bottom no-repeat, url(/i.jpg) left top repeat;
  padding: 15px;
  background-size: 50px, 130px, auto;
}
</style>

<div id="example1">

zhuei.com</div>

全尺寸背景图像
现在，我们希望网站上的背景图像始终覆盖整个浏览器窗口。
具体要求如下：
用图像填充整个页面（无空白）
根据需要缩放图像
在页面上居中图像
不引发滚动条
下面的例子显示了如何实现它：使用元素（元素始终至少是浏览器窗口的高度）。然后在其上设置固定且居中的背景。最后使用 background-size 属性调整其大小：

<style> 
html { 
  background: url(/img.jpg) no-repeat center fixed; 
  background-size: cover;
}

body { 
  color: white; 
}
</style>

<p>www.zhuei.com</p>

您还可以在 <div> 上使用不同的背景属性来创建 Hero Image（带有文本的大图像），并将其放置在您希望的位置上。

CSS background-origin 属性指定背景图像的位置。
该属性接受三个不同的值：
border-box – 背景图片从边框的左上角开始
padding-box -背景图像从内边距边缘的左上角开始（默认）
content-box – 背景图片从内容的左上角开始

CSS background-clip 属性指定背景的绘制区域。
该属性接受三个不同的值：
border-box – 背景绘制到边框的外部边缘（默认）
padding-box – 背景绘制到内边距的外边缘
content-box – 在内容框中绘制背景

CSS 高级背景属性

属性	描述
background	用于在一条声明中设置所有背景属性的简写属性。
background-clip	规定背景的绘制区域。
background-image	为一个元素指定一幅或多幅背景图像。
background-origin	规定背景图像的放置位置。
background-size	规定背景图像的大小。

如果你发现错误或有其他见解，请给www.zhuei.com留言，我们会尽快更新本文！

CSS 高级背景属性

发表评论 取消回复

发表评论取消回复