เราสามารถระบุคุณสมบัติพื้นหลังขององค์ประกอบโดยใช้แอตทริบิวต์พื้นหลัง สามารถใช้ค่าต่างๆ ต่อไปนี้:background-color, background-image, background-repeat, background-position, background-clip, background-size, background-origin และ background-attachment
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติพื้นหลัง CSS มีดังต่อไปนี้ -
Selector {
background: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติพื้นหลัง CSS -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: gray url("https://www.tutorialspoint.com/pytorch/images/pytorch.jpg") no-repeat;
font-size: 1.2em;
color: black;
}
h2 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px black;
}
p {
box-shadow: 0 0 5px 5px black;
}
</style>
</head>
<body>
<h2><i>PYTORCH Tutorial</i></h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
background-color: bisque;
}
div {
margin: auto;
background-color:orange;
width: 40%;
}
</style>
</head>
<body>
<h2>Demo Text</h2>
<div>demo demo demo demo</div>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
