开发学习网CSS 背景
原创CSS 背景
CSS 背景定义了 HTML 元素的背景颜色和图像。它们允许您在内容后面使用不同的颜色、渐变或图像。在本章中，我们将学习各种 CSS 背景属性，包括如何设置背景颜色、应用图像、调整其大小和位置、控制重复等。
CSS 背景示例
以下部分展示了为 HTML 元素设置颜色、图像和渐变的示例。
CSS 背景简写属性
背景简写属性允许您在单个声明中指定所有背景属性。
使用简写背景属性时，属性的正确顺序如下：
- background-color
- background-image
- background-position
- background-size（必须与 / 一起使用）
- background-repeat
- background-origin
- background-attachment
- background-clip
语法
background 属性的语法如下：
background: bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment | initial | inherit;
/* 示例 */
background: green url('image.jpg') top/20% no-repeat border-box content-box fixed;
注意：如果要添加 background-size，它必须紧跟在 background-position 之后，用 '/' 分隔。例如："left/50%"。
设置背景颜色
您可以使用 background-color 属性为 div、span、body、段落等元素设置背景颜色。
示例
在此示例中，我们为 body 和 div 标签使用了三种不同类型的颜色值。有关 CSS 中颜色的完整参考，请查看 CSS 颜色章节。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgray;
}
div{
padding: 25px;
}
.firstDiv{
background-color: rgb(255, 215, 0);
}
.secondDiv{
background-color: #f0f0f0;
}
.thirdDiv{
background-color: hsl(120, 100%, 75%);
}
</style>
</head>
<body>
<h2>CSS 背景颜色</h2>
Body 颜色: lightgray; <br> <br>
<div class="firstDiv"> 颜色: rgb(255, 215, 0) </div> <br>
<div class="secondDiv"> 颜色: #f0f0f0</div> <br>
<div class="thirdDiv"> 颜色: hsl(120, 100%, 75%)</div>
</body>
</html>
在背景中设置图像
要为另一个元素（如 div、span、body、段落等）设置图像作为背景，您可以使用 background-image 属性。它可用于设置一个或多个图像作为背景。要设置多个图像作为背景，我们使用逗号分隔图像。
示例
在此示例中，我们为 body 元素设置了背景图像。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
background-color: rgba(255, 255, 255);
opacity: 70%;
padding: 20px;
}
body {
background-image: url(/css/images/logo.png);
height: 350px;
}
</style>
</head>
<body>
<div>
<h1>欢迎访问我的网站</h1>
<p>
这是使用 CSS 设置背景图像的示例
</p>
</div>
</body>
</html>
定义背景位置
background-position 属性设置元素背景图像的初始位置。图像的位置相对于 background-origin 属性设置的值。
示例
在此示例中，我们使用 background-position 属性将背景图像的位置设置在 div 元素的右侧。
<!DOCTYPE html>
<html>
<head>
<style>
.position-right {
background-image: url('/css/images/logo.png');
background-position: right;
background-repeat: no-repeat;
width: 100%;
height: 300px;
border: 3px solid black;
position: relative;
}
</style>
</head>
<body>
<div class="position-right"></div>
</body>
</html>
设置背景大小
要设置元素背景图像的大小，您可以使用 background-size 属性。背景图像可以拉伸、约束或保持其正常大小。
示例
在此示例中，我们使用 background-size 属性将背景图像的大小设置为 div 元素的 100%。
<!DOCTYPE html>
<html>
<head>
<style>
.size-contain {
background-image: url('/css/images/pink-flower.jpg');
background-size: contain;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h2>CSS background-size 属性</h2>
<div class="size-contain"></div>
</body>
</html>
重复背景图像
您可以使用 background-repeat 属性控制背景图像的重复。图像可以沿水平和垂直轴重复，或不重复。
示例
在此示例中，我们使用 background-repeat 属性水平垂直重复背景图像。
<!DOCTYPE html>
<html>
<head>
<style>
.repeat {
background-image: url('/css/images/logo.png');
background-repeat: repeat;
width: 800px;
height: 400px;
position: relative;
}
</style>
</head>
<body>
<h2> CSS background-repeat 属性 </h2>
<div class="repeat"></div>
</body>
</html>
定义背景原点
CSS background-origin 属性用于设置背景的原点，可以从边框开始、在边框内部或在填充内部。
示例
在此示例中，我们使用 background-origin 属性将背景图像的原点设置为 div 元素的内容框。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 10px rgb(13, 7, 190);
border-style: dashed;
margin: 5px;
padding: 1cm;
font: 700 1em sans-serif;
color: aliceblue;
display: inline-block;
background-image: url('/css/images/yellow-flower.jpg');
height: 200px;
width: 200px;
background-size: contain;
}
.content-box {
background-origin: content-box;
}
</style>
</head>
<body>
<div class="content-box"> </div>
<p>
此图像背景从 div 元素的内容框开始。
</p>
</body>
</html>
控制背景滚动
您可以使用 background-attachment 属性确定背景图像的位置是固定在视口中还是在其容器内滚动。
示例
在此示例中，我们使用 background-attachment 属性将背景图像设置为固定在视口中。
<!DOCTYPE html>
<html>
<head>
<style>
.fixed {
background-image: url('images/logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top;
background-color: lightblue;
background-size: 40% 30%;
padding: 5rem;
width: 250px;
height: 500px;
}
</style>
</head>
<body>
<h2>CSS background-attachment 属性</h2>
<div class="fixed">
<p>
Lorem Ipsum 是印刷和排版行业的虚拟文本。自 1500 年代以来，Lorem Ipsum 一直是该行业的标准虚拟文本，当时一位不知名的印刷工拿出一排铅字并将其打乱以制作字体样本书。它不仅 survived 五个世纪，还进入了电子排版，基本上保持不变。在 1960 年代，随着包含 Lorem Ipsum 段落的 Letraset 纸张的发布，它开始流行起来，最近又与 Aldus PageMaker 等桌面出版软件一起流行，其中包括 Lorem Ipsum 的版本。
</p>
</div>
</body>
</html>
控制背景显示
您可以使用 CSS background-clip 属性指定背景图像或颜色应在元素的填充框、边框框或内容框内如何显示。它确定将应用背景的元素区域。
示例
在此示例中，我们使用 background-clip 属性将背景应用于 div 元素的内容和填充区域。
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 10px dotted black;
padding: 15px;
background: green;
color: white;
}
.border-area {
background-clip: border-box;
}
.padding-area {
background-clip: padding-box;
}
</style>
</head>
<body>
<h2>CSS background-clip 属性</h2>
<p class="border-area">
背景应用于整个元素。
</p>
<p class="padding-area">
背景应用于内容和填充区域。
</p>
</body>
</html>
CSS 背景属性
与 background 相关的所有属性列在下表中：
| 属性 | 描述 | 示例 |
|---|---|---|
| background | 背景相关属性的简写。 | 尝试 |
| background-attachment | 指定背景相对于视口的位置，固定或可滚动。 | 尝试 |
| background-clip | 控制背景图像超出元素的填充或内容框的程度。 | 尝试 |
| background-color | 设置元素的背景颜色。 | 尝试 |
| background-image | 在元素上设置一个或多个背景图像。 | 尝试 |
| background-origin | 设置背景的原点。 | 尝试 |
| background-position | 设置背景中每个图像的初始位置。 | 尝试 |
| background-position-x | 设置背景中每个图像的初始水平位置。 | 尝试 |
| background-position-y | 设置背景中每个图像的初始垂直位置。 | 尝试 |
| background-repeat | 控制背景中图像的重复。 | 尝试 |
| background-size | 控制背景图像的大小。 | 尝试 |
| background-blend-mode | 确定元素的背景图像如何相互混合。 | 尝试 |
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权本站发表，未经许可，不得转载。
作者文章
- CSS 使用CSS数学函数 4个月前 (08-23)
- CSS Textual data types 4个月前 (08-23)
- CSS 数字数据类型 4个月前 (08-23)
- CSS CSS 属性值定义语法 4个月前 (08-23)
- CSS 使用 CSS 过渡 4个月前 (08-23)