資料結構
網路
關係資料庫管理系統 (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.tw/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 次瀏覽
