在前端设计中背景是缺一不可的，接下来就来简单介绍一下背景的相关样式。
本次还是以div标签来进行说明。
一、背景颜色：background-color
此属性用来设置背景颜色。那么颜色的表示在前面的文章中已经提到有三种表现方式：英文（red、blue...）、RGB值、16进制值（#ffffff）。示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景颜色</title>
<style>
.container{
width:200px;
height:200px;
border:2px solid red;
background-color:pink;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
效果如下所示：
二、背景图片：background-image
图片背景在正常使用中用的比较频繁。必须要注意的是如果要给div设置背景图片的话必须要给div设置
宽高。如果不设置宽度的话那么div的宽度将为div父元素的宽度；如果没有设置高度则不会显示任何东西。
还需要注意的是：如果图片的宽高超过了div的宽高，那么div也不会被撑开，最终的显示效果会是图片只显示一部分。
背景图片在引用时url的值分为绝对地址和相对地址，由于绝对地址在磁盘更换、主机更换等原因后可能找不到资源，因此建议使用相对地址。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片</title>
<style>
.container{
width:500px;
height:500px;
border:2px solid red;
background-image: url(img/haizeiwang_little.jpg);
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
效果如下所示：
我们可以明显的看到背景图片进行了无数的重复，直到铺满整个div。如果我们不想让背景图片重复呢？
那么就需要用到我们下面要说到的background-repeat属性。
三、背景重复：background-repeat
此属性表示背景图片的重复效果，默认情况下如果图片的宽高不能铺满整个div的话那就会进行横向（X轴）、纵向（Y轴）进行重复显示。
background-repeat属性值：
repeat：重复（默认值）。
no-repeat：不重复，仅显示图片的原尺寸。
repeat-x：横向平铺（X轴平铺）
repeat-y：纵向平铺（Y轴平铺）
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片平铺</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
运行效果如下图所示：
四、背景图片定位：background-position
此属性用来定义背景图片在div中的显示位置，分为水平方向位置和垂直方向位置。
水平方向的位置分为：左（left）、中（center）、右（right）、数值
垂直方向的位置分为：上（top）、中（center）、下（bottom）、数值
在不写background-position属性的时候图片的默认显示位置为：左上（left top）
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片定位--默认位置</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
显示效果如下所示：
我们可以指定位置让图片显示在具体的位置：
如显示在右边中间位置，代码和效果如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片定位--右中位置</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
background-position:right center;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
如果位置是center的话，那么center可以不写。如：右下位置为（right center），也可以写成（right）
例如：如果要图片显示在中下的位置，代码和效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片定位--中下位置</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
background-position:bottom;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
我们同样也可以使用数值的方式更加自由的来决定图片的位置。
如：让图片在水平方向距左边20px，垂直方向居中显示。代码和效果如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片定位--自定义位置</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid mediumvioletred;
background-image:url(img/haizeiwang_little.jpg);
background-repeat:no-repeat;
background-position:20px center;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
五、背景图片滚动：background-attachment
background-attachment的属性值有两个：fixed、scroll
fixed：可以理解为将图片订在浏览器的某个位置，它不会随着浏览器一起滚动。
scroll：会随着浏览器滚动。
示例代码和效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片滚动</title>
<style>
#bgDiv {
width:700px;
height:700px;
border:2px solid blue;
background:url(img/haizeiwang_little.jpg) no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
在上图中可以看到浏览器已向下滚动了，由于背景图片设置了background-attachment为fixed，因此图片依然显示在左上角。
六、背景样式合并：background
不管是背景颜色还是背景图片，又或者说是背景的定义、平铺等等，这些都属于背景的相关样式，
那可以使用background来统一的设置背景的相关样式。代码和效果如下图所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid #C71585;
background:red url(img/haizeiwang_little.jpg) no-repeat 30px 40px;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
合并样式（background）中的属性顺序可以随意调整，没有固定的顺序；同样的属性也可写也可以不写。
注意：如果使用了合并样式（background），那么最好不要再使用单独的分样式，因为有会进行覆盖。
代码和效果如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
#bgDiv {
width:700px;
height:400px;
border:2px solid #C71585;
background:red url(img/haizeiwang_little.jpg) no-repeat 30px 40px;
background-color:blue;
}
</style>
</head>
<body>
<div id="bgDiv"></div>
</body>
</html>
在这个例子中合并样式background已经定义了背景颜色为红色（red），但是后面又单独定义了background-color为蓝色（blue），
由于background-color是在background之后定义的，因此背景颜色将从red被替换成blue。
ok，背景相关的样式介绍完毕，你明白了吗？
相关推荐
本文将详细介绍如何自定义`ListView`和`ListBox`的背景样式，包括但不限于选中行样式、背景颜色、边框样式等。 #### 二、基础知识 在深入探讨之前，我们先了解一些基本概念： 1. **`ListView`** 和 **`ListBox`**...
本篇将详细介绍CSS背景色的用法以及如何与HTML表格样式相结合。 首先，我们来探讨CSS背景色的设置。使用`background-color`属性可以改变元素的背景颜色。例如，如果你想让一个段落的背景色为红色，你可以这样写： ...
本文将详细介绍如何修改对话框的背景颜色，以VC为开发环境。通过重写对话框的OnPaint函数，我们可以实现对话框背景颜色的修改。 首先，需要理解对话框的绘制过程。在VC中，对话框的绘制是通过WM_PAINT消息来实现的...
本文将详细介绍如何自定义Android Spinner的样式，包括选择框背景、选择框文字属性以及弹出框文字属性。 1. **选择框背景** - 背景资源：可以使用`android:background`属性设置自定义背景图，或者通过XML定义形状...
【作品名称】：基于C++ MFC实现的五子棋游戏，包括棋盘棋子绘制、输赢判定、新游戏、悔棋和修改棋盘背景样式等功能 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大...
该实例是jxl工具的入门代码。jxl是java对excel操作的开源工具，可以实现绝大部分的excel处理。 其中，BorderLineOfJxl.java...ColourOfJxl.java是展示jxl的单元格背景样式。 JxlTest.java是我blog里的jxl介绍的代码。
那么这篇文章将详细介绍了这几种背景图片的处理方法。 正如前面所说，仅仅依靠CSS现有的属性，我们无法实现背景裁切、背景透明度、背景变换和复杂背景定位等效果.为了实现这些效果，我们需要借助CSS的其他方法来实现...
### 改变table中行的背景 ...对于希望使表格更具交互性和视觉吸引力的开发者来说，通过...在实际应用中，还可以进一步优化样式和逻辑，例如使用CSS类替代内联样式，或利用现代前端框架如React、Vue等来管理状态和样式。
下面将详细介绍如何利用JS实现动态背景图效果。 首先，我们需要了解基本的HTML和CSS知识。HTML用于构建网页结构，而CSS则负责样式和布局。为了设置背景图，可以在CSS中使用`background-image`属性，例如： ```css ...
以上介绍的是CSS中关于背景设置的基本知识点及其用法。通过合理使用这些属性，可以有效地为网页元素设置美观的背景，从而增强网站的整体视觉效果。掌握这些基本属性的应用方法对于前端开发人员来说是非常重要的基础...
"优美的ppt背景"这一主题涵盖了许多设计原则和技巧，下面将详细介绍如何挑选、设计以及优化PPT背景，让你的演示文稿更具魅力。 1. **色彩搭配**：颜色是影响PPT背景美观度的关键因素。了解基本的色彩理论，如色相、...
本文将详细介绍如何实现GroupBox的透明背景，并探讨相关的编程技术和注意事项。 首先，我们要理解Windows Forms和WPF（Windows Presentation Foundation）这两个.NET框架中的GroupBox透明度处理方式的不同。在...
css 背景样式属性说明 CSS 背景样式属性是控制网页背景样式的基本属性，它包括背景颜色、背景图片、背景重复、背景固定、背景定位等多个方面。下面对这些属性进行详细的解释： 1. 背景颜色（background-color） ...
项目的基本演示的背景介绍 在Java开发领域，实际项目经验是提升技能和理解业务需求的关键。本教程以“企业级员工信息管理系统”为例，旨在帮助初学者和有一定基础的开发者更好地理解如何将理论知识应用到实际项目...
#### 背景介绍 在图形设计与网页制作领域，图片背景的处理是一项非常重要的技术。特别是在需要将图片嵌入到不同颜色或图案的背景下时，背景透明的图片可以更好地融合整体设计，提高视觉效果的和谐度。Adobe ...
我们可以通过设置`QTableView`的样式表来改变行的背景色。例如： ```cpp tableView->setStyleSheet(R"( QTableView tr:hover { background-color: lightblue; /* 更改为所需的背景色 */ } )"); ``` - **...
要实现Spinner选择条目背景图和选择后背景图不一样的效果，我们需要对Spinner的样式进行自定义。下面将详细介绍如何通过代码和资源文件来实现这一功能。 1. **Spinner的基本使用** Spinner通常与ArrayAdapter或...
本教程将详细介绍如何在ListView中实现自定义图片背景，并确保背景在滚动条滚动时保持静止，且无闪烁效果。 1. **自定义图片背景**： - 首先，我们需要加载自定义的背景图片。这通常通过编程方式或者资源管理器...
文档接着详细介绍了如何通过编程方式改变TabControl控件的背景颜色。首先需要注册TabControl控件的DrawItem事件，这个事件会在TabControl需要被绘制时触发。然后通过实现DrawItem事件的处理函数，可以在其中编写绘制...
在“设计”菜单下选择“格式图表区域”，然后在弹出的对话框中调整背景样式。 2. **绘图区背景**：绘图区是图表内部，不含边框的部分。可以单独设置其背景颜色或纹理，有助于突出显示数据系列。同样通过“格式图表...