CSS에서 색상이 있는 오버레이 이미지
-
rgba()함수를 사용하여 CSS에서 색상으로 배경 이미지 오버레이 -
linear-gradient기능을 사용하여 CSS에서 그라데이션으로 배경 이미지 오버레이 -
background-blend-mode속성을 사용하여 CSS에서 그라데이션으로 배경 이미지 오버레이
이 기사에서는 CSS에서 이미지를 색상으로 오버레이하는 몇 가지 방법을 소개합니다.
rgba() 함수를 사용하여 CSS에서 색상으로 배경 이미지 오버레이
rgba() 함수를 사용하여 이미지 위에 색상 오버레이를 만들 수 있습니다. 함수를 background 속성의 값으로 사용할 수 있습니다.
rgba() 함수의 구문은 다음과 같습니다.
rgba(red, green, blue, opacity);
여기서 빨강, 녹색 및 파랑 색상은 0-255 사이의 값과 0-1 범위의 불투명도로 설정됩니다. opacity 값이 0으로 설정되면 완전히 투명하고 opacity 값이 1로 설정되면 완전히 불투명합니다.
이미지 위에 색상을 추가하고 불투명도를 낮추는 것만으로 오버레이를 만들 수 있습니다.
예를 들어 div 태그를 만들고 ID를 main으로 지정합니다. 그런 다음 헤더 내부에 div를 만들고 클래스 overlay를 지정합니다.
다음으로 p 단락을 만들고 텍스트를 작성합니다. CSS에서 배경 이미지를 main id로 설정하여 background: url("") no-repeat fixed.
background-repeat 속성은 no-repeat이고 background-position 속성은 fixed입니다. 다음으로 div에 100%의 높이를 주어 내용에 따라 높이를 조정합니다.
오버플로 속성을 hidden으로 설정하여 컨테이너에서 넘치는 콘텐츠를 숨깁니다. 또한 color를 white로 설정하여 텍스트를 더 잘 보이게 합니다.
마지막으로 position 속성을 absolute로 설정합니다.
다음으로 overplay div의 스타일을 지정하여 오버레이를 만들어야 합니다. background: rgba(50, 70, 80, 0.7);와 같이 불투명도와 함께 배경색을 지정합니다.
height 속성을 100%로 설정하여 상위 요소의 높이와 일치시키십시오. 위와 같이 div의 overflow 속성을 hidden으로 설정합니다.
아래 예는 overlay라는 클래스 이름을 가진 div가 main div 위에 나타나는 것을 보여줍니다. div의 배경색이 투명하기 때문에 배경 이미지가 보입니다.
예제 코드:
<div id="main">
<div class="overlay">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
#main {
background: url("/img/DelftStack/logo.png") no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF;
position: absolute;
}
.overlay {
background: rgba(50, 70, 80, 0.7);
overflow: hidden;
height: 100%;
}
linear-gradient 기능을 사용하여 CSS에서 그라데이션으로 배경 이미지 오버레이
선형 그라디언트는 직선을 따라 2개 이상의 색상 간에 점진적 전환의 다채로운 이미지를 만드는 CSS 기능입니다. 다양한 색상을 혼합하고 다른 방향을 사용하여 다채로운 패턴을 만듭니다.
linear-gradient를 배경색으로 사용할 수 있으며 이미지 오버레이로도 사용할 수 있습니다. 그러나 이미지 오버레이로 사용하려면 배경 이미지와 함께 사용해야 합니다.
불투명도가 낮은 색상은 배경 이미지가 보이도록 선형 그라데이션이어야 합니다.
linear-gradient 함수의 첫 번째 매개변수는 기울기의 방향입니다. 그런 다음 필요에 따라 색상 정지점을 지정할 수 있습니다.
예를 들어, ID가 main인 div를 작성하십시오. CS에서 id를 선택하고 컨테이너의 높이와 너비를 100vh 및 100%로 설정합니다.
그런 다음 background 속기 속성을 사용하여 선형 그라데이션 및 배경 이미지를 설정합니다. linear-gradient 속성을 작성하고 to right 방향을 첫 번째 매개변수로 사용합니다.
다음으로 rgba() 함수를 사용하여 그래디언트를 지정합니다. rgba(50, 70, 80, 0.7)를 첫 번째 색상 정지점으로 쓰고 rgba(30, 20, 150, 0.7)를 두 번째 색상 정지점으로 추가합니다.
linear-gradient 함수 다음에 url()을 사용하여 이미지를 삽입하고 no-repeat 및 fixed 옵션을 배경 이미지에 사용합니다.
여기에서는 선형 그라데이션에 두 가지 색상을 사용했으며 각 색상의 불투명도는 0.7입니다. linear-gradient 안의 to right 값은 색상의 패턴 또는 방향을 나타냅니다.
이는 컨테이너의 왼쪽에 rgba(50, 70, 80, 0.7) 색상이 포함되어 있으며 오른쪽으로 이동하면서 점차 색상이 rgba(30, 20, 150, 0.7)로 변경된다는 의미입니다.
아래 예는 linear-gradient가 linear-gradient에 사용된 색상의 투명도로 인해 왼쪽에서 오른쪽으로 움직이는 두 가지 색상을 포함하는 이미지 오버레이를 제공한다는 것을 보여줍니다.
예제 코드:
<div id="main">
</div>
#main {
height: 100vh;
width: 100%;
background: linear-gradient(to right, rgba(50, 70, 80, 0.7), rgba(30, 20, 150, 0.7)), url("/img/DelftStack/logo.png") no-repeat fixed;
}
background-blend-mode 속성을 사용하여 CSS에서 그라데이션으로 배경 이미지 오버레이
background-blend-mode 속성은 요소의 배경 이미지가 요소의 배경색과 어떻게 혼합되어야 하는지를 설정합니다. 속성은 lighten, darken, multiply, saturation, overlay, soft-light, color-dodge, hard-light 등과 같은 값을 취합니다.
background-blend-mode 속성은 background-color와 background-image를 혼합합니다. background-blend-mode 속성의 기본값은 normal입니다.
속성을 사용하여 배경 이미지에 오버레이를 제공할 수 있습니다. 배경 이미지를 설정한 후 background-blend-mode 속성을 사용할 수 있습니다.
예를 들어 HTML에서 div를 만듭니다. CSS에서 url() 함수를 사용하여 배경 이미지를 설정하고 background 속성에서 no-repeat 및 fixed 값을 설정합니다.
다음으로 div의 높이를 100vh로 설정합니다. overflow 속성에 hidden 값을 적용합니다.
마찬가지로 background-color 속성을 rgba(50, 70, 80, 0.7) 값으로 설정합니다. 마지막으로 background-blend-mode를 사용하고 값을 soft-light로 설정하여 배경 이미지에 오버레이 효과를 추가합니다.
예제 코드:
<div id="main">
</div>
#main {
background: url("/img/DelftStack/logo.png") no-repeat fixed;
height: 100vh;
overflow: hidden;
background-color: rgba(50, 70, 80, 0.7);
background-blend-mode: soft-light;
}