数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学背景和背景颜色的区别
CSS为HTML元素提供了各种样式选项。这些属性可用于不同的目的，包括修改HTML组件的宽度和高度以及添加背景图像和颜色。此属性还包括边距、颜色、宽度、高度、背景、背景颜色以及许多其他属性。HTML元素的背景使用background和background-color属性设置。
让我们深入了解这篇文章，学习更多关于background和background-color之间区别的知识。让我们逐一讨论它们。
CSS background属性
CSS background属性帮助我们设置元素的背景样式。CSS background属性是指定元素背景的简写。其他background属性包括：
background-color,
background-image,
background-repeat,
background-position,
background-clip,
background-size,
background-origin,
background-attachment,
语法
以下是CSS background属性的语法
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
示例
以下示例中，我们将使用background-image属性到网页。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://img.rawpixel.com/private/static/images/website/2022-05/rm422-076-x.jpg?w=1200&h=1200&dpr=1&fit=clip&crop=default&fm=jpg&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=444e119094ef45a3248aa529fb696b2b");
margin-left: 250px;
font-family: verdana;
color: #2ECC71;
}
</style>
</head>
<body>
<h1>WELCOME</h1>
</body>
</html>
运行上述代码后，将生成一个输出，其中包含在网页上显示的背景图像以及其上的文本。
示例
让我们来看下面的例子，我们将使用CSS background-position属性。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: white url('https://tutorialspoint.com/cg/images/logo.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
Font-family: verdana;
text-align: center;
color: #1E8449;
}
</style>
</head>
<body>
<h1>WELCOME</h1>
</body>
</html>
运行上述代码后，输出窗口将弹出，显示上传并在中心以固定位置显示的图像，以及网页上显示的文本。
CSS background-color属性
在CSS中，background-color属性用于定义元素的背景颜色。除了边距外，背景跨越元素的整个大小。它使用户更容易阅读文本。
语法
以下是background-color属性的语法
background-color: color|transparent|initial|inherit;
示例
考虑以下示例，我们将使用background-color属性。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: verdana;
text-align: center;
color: #DE3163;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<h2>TutorialsPoint</h2>
<p>The Best-Eway Learning.!</p>
</body>
</html>
运行上述代码后，将生成一个输出，其中包含应用的文本和网页上显示的背景颜色。
background和background-color属性的区别
让我们看看background和background-color属性之间的一些区别：
特性 |
background属性 |
background-color属性 |
|---|---|---|
级别 |
当您需要添加各种背景值时，它易于使用。所有背景属性值都可以一次更改。 |
如果您只需要添加单个背景颜色，则可以使用它。 |
功能 |
用于指定所有背景属性。 |
用于指定背景颜色。 |
操作范围 |
它适用于所有背景属性 |
它仅适用于背景颜色。 |
重置 |
用于重置所有以前的背景设置。 |
用于重置仅以前的背景颜色。 |
类型 |
它是一个超集属性 |
它是一个子集属性 |
语法 |
background:values |
background-color:color |
253 次浏览
