CSS에서 배경 이미지 어둡게 하기

1. 선형 그라디언트를 사용하여 CSS에서 배경 이미지 어둡게 하기
2. background-blend-mode 속성을 사용하여 CSS에서 배경 이미지 어둡게 하기

이 기사에서는 CSS에서 배경 이미지를 어둡게 하는 몇 가지 방법을 소개합니다.

선형 그라디언트를 사용하여 CSS에서 배경 이미지 어둡게 하기

CSS 선형 그라디언트를 사용하여 CSS의 배경 이미지를 어둡게 할 수 있습니다. linear-gradient() 함수는 선형 그라디언트로 배경을 생성합니다. 선형 그라디언트는 최소 두 가지 색상 간의 부드러운 전환입니다. 이 함수는 셀 수 없이 많은 색상 매개변수를 사용합니다. 그라디언트의 방향을 첫 번째 매개변수로 설정할 수 있습니다. 방향 옵션은 to right, to left, to bottom right, 90deg 등입니다. 배경 이미지에 선형 그래디언트를 적용하고 불투명도로 어두운 색상을 설정하여 배경 이미지를 어둡게 할 수 있습니다. . linear-gradient() 함수의 rgba() 함수를 사용하여 색상을 설정할 수 있습니다. 여기서는 다른 요소를 어둡게 하지 않고 배경 이미지만 어둡게 합니다.

예를 들어 CSS에서 컨테이너를 선택하고 background 속기 속성을 사용하여 선형 그래디언트 및 배경 이미지를 설정합니다. linear-gradient() 함수를 작성하고 두 개의 색상 정지점을 rgba(0, 0, 0, 0.7)로 지정합니다. 다음으로 url() 함수를 사용하여 원하는 배경 이미지를 설정합니다. 다양한 배경 속성을 사용하여 이미지를 배경에 올바르게 배치합니다. background-position을 center로, background-repeat를 no-repeat로, background-size를 cover로 설정합니다. 높이를 100%로 설정합니다. body 및 html 태그를 선택하고 높이를 100%로, 여백을 0으로 설정했는지 확인하십시오.

아래 예에서는 rgba(0, 0, 0, 0.7)를 두 가지 색상 정지점으로 사용했습니다. rgba(0, 0, 0) 함수는 검정색과 같습니다. 네 번째 값은 불투명도 값입니다. 값이 1에 가까울수록 어두워지고 그 반대의 경우도 마찬가지입니다. 배경 이미지를 어둡게 해야 하는 경우 불투명도 값을 조정할 수 있습니다. 이런 식으로 선형 그래디언트를 사용하여 CSS의 배경 이미지를 어둡게 할 수 있습니다.

예제 코드:

<div id="background"></div>

body, html {
    height: 100%;
    margin: 0;
}

#background {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

background-blend-mode 속성을 사용하여 CSS에서 배경 이미지 어둡게 하기

background-blend-mode 속성을 사용하여 CSS의 배경 이미지를 어둡게 할 수 있습니다. 속성은 배경의 혼합 모드를 설정합니다. 이 속성에는 다양한 옵션이 있습니다. 일부 옵션은 normal, multiply, darken, lighten, saturation 등입니다. darken 옵션을 사용하여 배경 이미지를 더 어둡게 만들 수 있습니다. rgba() 함수를 사용하여 배경 이미지의 색상을 설정할 수 있습니다.

예를 들어 CSS에서 background id를 선택하고 background 속성을 사용하여 색상과 배경 이미지를 설정합니다. 색상을 rgba(0, 0, 0, 0.7)로 설정하고 url() 함수에서 자리 표시자 이미지를 사용합니다. 첫 번째 방법과 같이 다른 배경 속성을 사용하여 이미지를 올바르게 설정합니다. 다음으로 background-blend-mode 속성을 사용하고 darken으로 설정합니다.

이런 식으로 background-blend-mode 속성을 사용하여 배경 이미지를 어둡게 할 수 있습니다.

예제 코드:

#background {
    background: rgba(0, 0, 0, 0.7) url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}

<div id="background"></div>