CSS로 배경 이미지 그라데이션 만들기
Zeeshan Afridi
2023년6월20일
배경 이미지 그라데이션은 한 색상에서 다른 색상으로 점진적으로 전환되는 것입니다. 배경 이미지 그라디언트는 다양한 색상을 사용하여 만들 수 있지만 일반적으로 제한된 색상 팔레트를 사용할 때 가장 효과적입니다.
이 기사에서는 CSS로 배경 이미지 그라디언트를 만드는 방법을 알려줍니다.
CSS로 배경 이미지 그라데이션 만들기
단색, 보색 및 유사 색상을 비롯한 다양한 색상 팔레트 유형을 사용하여 배경 이미지 그라데이션을 만들 수 있습니다. 선택한 두 가지 색상을 사용하여 그라디언트를 만들 수도 있습니다.
아래 예에서는 페이지 상단에서 시작하는 밝은 그라데이션에서 어두운 그라데이션이 있습니다. 이렇게 하면 사이트에 시각적인 흥미를 더할 수 있는 미묘하고 효과적인 방법이 만들어집니다.
암호:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>
<div id="grad1"></div>
</body>
</html>
배경 이미지를 읽을 수 있게 만드는 기조 연설
배경 이미지를 더 읽기 쉽게 만들기 위해 몇 가지 작업을 수행할 수 있습니다.
- 밝거나 중간색의 배경색을 사용하십시오. 이렇게 하면 이미지의 텍스트가 더 잘 보입니다.
- 밝은 배경에 어두운 텍스트 색상을 사용하거나 어두운 배경에 밝은 텍스트 색상을 사용하십시오. 이렇게 하면 텍스트를 더 쉽게 읽을 수 있습니다.
- 텍스트와 배경 사이의 대비를 높입니다. 이렇게 하면 텍스트가 더 눈에 띄고 읽기 쉽습니다.
결론
배경 이미지 그라데이션을 사용할 수 있는 몇 가지 방법이 있습니다. 한 가지 방법은 배경 이미지에 그래디언트 오버레이를 추가하는 것입니다.
배경 이미지 그라데이션을 사용하는 또 다른 방법은 그라데이션 마스크를 만드는 것입니다. 이 고급 방법은 올바르게 수행하면 매우 효과적일 수 있습니다.
작가: Zeeshan Afridi
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn