[CSS] background 속성 : 이미지 어둡게 하는 3가지 방법

이미지 어둡게 하기는 아래와 같이 3가지 방법으로 해결 할 수 있습니다.

1. filter : brightness()

2. opacity, backgroud-color

3. linear-gradient()

1. filter: brightness()

CSS의 Filter에 적용되는 brightness 함수는 주어진 이미지의 밝기를 조절한다.

허용값  

• 숫자
  • 1은 100%입니다.
• 퍼센트
  • 100% 미만은 이미지를 어둡게 합니다.
  • 100% 초과는 이미지를 밝게 합니다.
  • 0%는 이미지를 검은색으로 만듭니다.

brightness(100%); /* 원본 이미지 */
brightness(0%);   /* 검은색 */
brightness(200%); /* 밝기 2배 */
brightness(0.4);  /* 40% */

---

2. opacity, backbround-color

my_img {    opacity: 0.5;} 
.my_div {    background-color: black;} 
.outer_div {    width: 300px;    float: left;    border: 1px solid;} 
img {    width: 300px;}

opacity: 0.5;

먼저 이미지의 투명도를 0.5로 지정하여 투명하게 만들었습니다.

background-color: black;

이미지를 감싸고 있는 div의 배경색을 검정색으로 지정하였습니다.

---

3. linear-gradient ( 배경 이미지 어둡게 하기 )

.bg_1 { background-image: url("../img/puppy.jpg"); width: 300px; height: 180px;} 
.bg_2 { background-image: linear-gradient(rgba(0, 0, 0, 0.527), rgba(0, 0, 0, 0.5)), url("../img/puppy.jpg");width: 300px;height: 180px;} 
.outer_div { width: 300px; float: left; border: 1px solid;}