background-image 명도 조절 (linear-gradient)

> background-image 어둡게 하기

section {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(${url});
}

 

> #fff to #e8e8e8

section {
  background-image: linear-gradient(
    to bottom,
    #fff,
    #fff,
    #fdfdfd 50%,
    #f0f0f0 85%,
    #eaeaea,
    #e8e8e8
  );
}

 

> 텍스트 절반 밑줄 긋기

  background: linear-gradient(
    to bottom,
    #fff 50%,
    rgb(203, 203, 203, 0.44) 50%
  );

#cbcbcb + opacity 0.44를 한 줄로 표현하면 rgb(203, 203, 203, 0.44)로 가능하다!

---

✅ 추가

> box-shadow 버튼 하단

box-shadow: rgb(41 41 41 / 55%) 0px 10px 10px -5px;

 

> typescript  img태그에 src 연결하기

<img src={require("../../xxx.webp")} />

혹은

<img src={require("../../xxx.webp").default} />

require만 붙이면 이미지가 아닌 객체가 return되기 때문!

default를 붙이면서 이미지 자체를 불러올 수 있다.