mark340
착하게살자
mark340
전체 방문자
오늘
어제
  • 분류 전체보기 (98)
    • 백준 (11)
    • 알고리즘 (1)
    • Javascript (17)
    • CS (18)
    • 기타 (9)
    • AI (1)
    • Angular (2)
    • Linux (14)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • JavaScript
  • MySQL
  • Closure
  • oauth
  • parsing

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
mark340

착하게살자

기타

CSS3 - HTML img 태그에 넣은 svg 파일의 색상 바꾸기

2023. 6. 8. 18:32

1. svg 파일 구해서 img 태그로 넣어주기

<img src="../prec/img/imageFile.svg" alt="lorem asdf"/>

2. 원하는 색의 hex 값 알아내기

https://www.color-hex.com/

3. filter 값 계산하기

https://codepen.io/sosuke/pen/Pjoqqp

위의 페이지에서 Target color 에서 hex 값 넣고, filter 값 알아내기

4. img 태그나 선택자를 이용하여, css filter 속성에 3번에서 알아낸 값 붙여넣기

#img-front {
	filter: invert(45%) sepia(63%) saturate(1946%) hue-rotate(162deg)
	brightness(95%) contrast(101%);
}
저작자표시 (새창열림)

'기타' 카테고리의 다른 글

[AWS] AccessDeniedException: User is not authorized to perform: lambda:InvokeFunction  (0) 2023.08.22
밥만 먹는 밥벌레 장군  (1) 2023.07.12
[LeetCode] Group Anagrams  (0) 2023.02.04
시리즈 A B C란  (0) 2023.01.11
허준이 교수의 졸업 축사 전문  (2) 2023.01.10
    '기타' 카테고리의 다른 글
    • [AWS] AccessDeniedException: User is not authorized to perform: lambda:InvokeFunction
    • 밥만 먹는 밥벌레 장군
    • [LeetCode] Group Anagrams
    • 시리즈 A B C란
    mark340
    mark340
    착하게삽시다

    티스토리툴바