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> 출력
