linear-gradient() ใช้เพื่อกำหนด linear gradient เป็นภาพพื้นหลัง -
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
ด้านบน ให้ตั้งค่าจุดเริ่มต้นและทิศทาง โดยให้สีนั้นหยุดเพื่อให้การเปลี่ยนภาพเป็นไปอย่างราบรื่น
ตัวอย่าง
ให้เรามาดูตัวอย่างการใช้งาน linear-gradient() −
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-image: linear-gradient(to bottom right, red , blue);
position: absolute;
right: 90px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>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. This is demo text. </div>
</body>
</html> ผลลัพธ์
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet);
}
.demo {
text-decoration: overline;
text-decoration-color: yellow;
font-size: 1.3em;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html> ผลลัพธ์
