為Web開(kāi)發(fā)人員,最常見(jiàn)的事情之一就是更改HTML元素的背景顏色。但是,如果您不了解如何使用CSS background-color屬性,可能會(huì)產(chǎn)生混淆。在本文中,我們討論以下幾點(diǎn)
1.HTML元素的默認(rèn)背景色值
2.如何更改div的背景顏色,這是非常常見(jiàn)的元素
3.該background-color屬性會(huì)影響CSS盒子模型的哪些部分,以及
4.此屬性可以采用的不同值。
div的默認(rèn)背景顏色是transparent。因此,如果您不指定div的背景色,它將顯示其父元素的背景色。
在此示例中,我們將更改以下div的背景顏色。
<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>
沒(méi)有任何樣式,它將在視覺(jué)上轉(zhuǎn)換為以下內(nèi)容。
讓我們通過(guò)向類中添加樣式來(lái)更改div的背景顏色。您可以通過(guò)嘗試HTML文件中的示例進(jìn)行操作。
<style>
.div-1 {
background-color: #EBEBEB;
}
.div-2 {
background-color: #ABBAEA;
}
.div-3 {
background-color: #FBD603;
}
</style>
<body>
<div class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>
</body>
這將導(dǎo)致以下結(jié)果:
看!我們已成功更改了該div的背景顏色。接下來(lái),讓我們更多地了解此屬性。讓我們看看background-color屬性如何影響CSS-box模型的各個(gè)部分。
根據(jù)CSS框模型,所有HTML元素都可以建模為矩形框。每個(gè)盒子由4個(gè)部分組成,如下圖所示。
如果您不熟悉Box模型,則可以查閱相關(guān)資料。問(wèn)題是,當(dāng)您更改div的背景顏色時(shí),Box模型的哪一部分會(huì)受到影響?簡(jiǎn)單的答案是填充區(qū)域和內(nèi)容區(qū)域。讓我們通過(guò)一個(gè)例子來(lái)確認(rèn)這一點(diǎn)。
<style>
body {
background-color: #ABBAEA;
}
div {
height: 200px;
margin: 20px;
border: 5px solid;
background-color: #FBD603;
}
</style>
<body>
<div>
<p>This is the parent div which contains the div we are testing</p>
<div>
<p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
</div>
</div>
</body>
這將導(dǎo)致:
從上面的示例中,我們可以看到空白區(qū)域和邊框區(qū)域不受背景顏色變化的影響。我們可以使用border-color屬性更改邊框的顏色。邊距區(qū)域保持透明,并反映父容器的背景色。
最后,讓我們討論background-color屬性可以采用的值。
就像color屬性一樣,background-color屬性可以采用六個(gè)不同的值。讓我們通過(guò)一個(gè)示例考慮三個(gè)最常見(jiàn)的值。在示例中,我們將div的背景色設(shè)置為具有不同值的紅色。
<style>
/* Keyword value/name of color */
.div-1 {
background-color: red;
}
/* Hexadecimal value */
.div-2 {
background-color: #FF0000;
}
/* RGB value */
.div-3 {
background-color: rgb(255,0,0);
}
</style>
<body>
<div class="div-1">
<p>The background property can take six different values.</p>
</div>
<div class="div-2">
<p>The background property can take six different values.</p>
</div>
<div class="div-3">
<p>The background property can take six different values.</p>
</div>
</body>
注意,它們的結(jié)果都是相同的背景色。
該background-color屬性可以采用的其他值包括HSL值,特殊關(guān)鍵字值和全局值。這是每個(gè)例子。
/* HSL value */
background-color: hsl(0, 100%, 25%;
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
設(shè)置元素的背景色時(shí),重要的是要確保背景色和其包含的文本顏色的對(duì)比度足夠高。這是為了確保弱視人士可以輕松閱讀文本。
第一個(gè)div的背景顏色與文本顏色之間的對(duì)比度不夠高,每個(gè)人都看不到。因此,除非您是唯一正在使用的網(wǎng)站,并且您的視力非常好,否則應(yīng)避免這種顏色組合。
第二個(gè)div在背景顏色和文本顏色之間具有更好的對(duì)比度。因此,它使人們更容易閱讀和閱讀。
在本文中,我們看到了如何更改div的背景顏色。我們還討論了CSS Box模型的哪些部分受背景顏色變化的影響。最后,我們討論了background-color屬性可以采用的值。
希望本文對(duì)您有所幫助。謝謝閱讀。
trokeRect(x,y,width,height) 只繪制邊框但沒(méi)有填充
strokeRect()與fillRect()參數(shù)都相同,只是fillRect()方法繪制的是填充顏色的矩形;而strokeRect()方法繪制的是只有邊框的矩形。
實(shí)例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>繪制矩形</title>
<script type="text/javascript">
function drawRect(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "006633";
ctx.strokeRect(200,50,100,80);
}
</script>
<style type="text/css">
myCanvas{border:1px solid black;}
</style>
</head>
<body>
<input type="button" value="繪制矩形" onclick="drawRect()"/><br />
<canvas id="myCanvas"></canvas>
</body>
</html>
繪制調(diào)色板
在Canvas中繪制了多個(gè)矩形(位置互不重疊),點(diǎn)擊矩形在矩形右側(cè)彈出操作框,操作框內(nèi)含有多個(gè)狀態(tài)操作按鈕,點(diǎn)擊狀態(tài)操作按鈕后修改對(duì)應(yīng)的矩形的背景色為與狀態(tài)對(duì)應(yīng)的顏色。
1、使用數(shù)組存儲(chǔ)多個(gè)矩形的信息,矩形信息中包含ID、位置、寬高、狀態(tài)、文本,遍歷數(shù)組繪制多個(gè)矩形;
2、給整個(gè)Canvas元素綁定單擊事件,獲取鼠標(biāo)單擊的位置信息;
3、遍歷矩形數(shù)組,獲取鼠標(biāo)點(diǎn)中的矩形;如果有點(diǎn)中矩形,則在矩形右側(cè)顯示狀態(tài)操作框,并將點(diǎn)中的矩形賦值給全局變量target;如果沒(méi)有點(diǎn)中矩形且狀態(tài)操作框處于顯示狀態(tài)則隱藏狀態(tài)操作框;
4、點(diǎn)擊狀態(tài)操作按鈕,遍歷矩形數(shù)組修改與全局變量target的ID相同的矩形的狀態(tài);
5、遍歷矩形數(shù)組重新繪制所有矩形。
1、創(chuàng)建文件骨架,引入 jquery;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Canvas</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
// ...
</script>
</body>
</html>
2、全局變量
// 獲取 Canvas 對(duì)象
var canvas = document.getElementById("canvas");
// 獲取上下文環(huán)境對(duì)象
var ctx = canvas.getContext("2d");
// 狀態(tài)與矩形背景色映射關(guān)系
var statusStyleMap = {
0: "#fffbf0",
1: "#45C552",
2: "#F45454",
3: "#FFE960",
4: "#5EB1FF",
};
// 需要繪制的矩形信息列表,含ID、坐標(biāo)位置、寬度、高度、狀態(tài)
var rectList = [
{
id: 1,
x: 50,
y: 50,
width: 200,
height: 30,
status: 0,
},
{
id: 2,
x: 200,
y: 100,
width: 200,
height: 30,
status: 0,
},
];
// 當(dāng)前點(diǎn)中的矩形
var targetRect = null;
全局變量中我們定義了Canvas對(duì)象、上下文環(huán)境對(duì)象、狀態(tài)與矩形背景色映射關(guān)系、需要繪制的矩形信息列表、當(dāng)前點(diǎn)中的矩形。
3、定義繪制矩形的方法
// 繪制矩形
function drawRect(rect) {
ctx.strokeStyle = "#FDCC6B";
ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
var fileStyle = statusStyleMap[rect.status];
ctx.fillStyle = fileStyle;
ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
// 繪制文本
ctx.textAlign = "left";
ctx.fillStyle = "#333333";
ctx.font = "18px 'Microsoft YaHei'";
//
ctx.fillText("Click Me.", rect.x + 10, rect.y + 18 + 4);
ctx.stroke();
}
頁(yè)面加載完成后初始繪制所有矩形。
$(function () {
// 初始繪制矩形
for (var i = 0; i < rectList.length; i++) {
drawRect(rectList[i]);
}
});
所有矩形成功渲染后的效果圖如下:
4、Canvas元素單擊事件處理
// 畫(huà)布點(diǎn)擊事件綁定、處理
canvas.onclick = function (e) {
console.log("## canvas click ##");
// 控制臺(tái)打印點(diǎn)擊位置坐標(biāo)信息
console.log("x: " + e.offsetX + ", y: " + e.offsetY);
// 獲取點(diǎn)擊的矩形
var target = rectList.find((item, index) => {
return (
e.offsetX >= item.x &&
e.offsetX <= item.x + item.width &&
e.offsetY >= item.y &&
e.offsetY <= item.y + item.height
);
});
// 如果獲取到了矩形信息
if (target) {
targetRect = target;
// 設(shè)置狀態(tài)操作區(qū)位置
$(".item-operations").css({
position: "absolute",
top: targetRect.y + $("#canvas").offset().top + "px",
left:
targetRect.x +
targetRect.width +
$("#canvas").offset().left +
"px",
});
// 顯示狀態(tài)操作區(qū)
$(".item-operations").show();
} else {
// 如果點(diǎn)擊的是畫(huà)布其它位置(非矩形上)則清空選中的矩形、隱藏狀態(tài)操作區(qū)
targetRect = null;
$(".item-operations").hide();
}
};
Canvas中的矩形點(diǎn)擊之后的效果圖如下:
5、狀態(tài)操作按鈕單擊事件處理
// 狀態(tài)操作按鈕單擊事件綁定、處理
$(".item-operations li").click(function () {
console.log("## operation click ##");
var targetStatus = $(this).attr("data-status");
targetRect.status = targetStatus;
for (var i = 0; i < rectList.length; i++) {
if (rectList[i].id === targetRect.id) {
rectList[i].status = targetRect.status;
}
console.log("id: " + targetRect.id);
console.log(rectList[i]);
drawRect(rectList[i]);
}
$(".item-operations").hide();
});
選擇狀態(tài)后的效果圖如下:
完整代碼:
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。