SOS团 Data Center.

  • 홈
  • 방명록

웹/Front-End 1

고정된 배경화면 넣기, 투명도 조절, 색 필터 넣기

요즘 취미로 배우고 있는 웹 프론트엔드 수업에서 다음과 같은 설문지 폼을 작성해볼 기회가 있었다. 여기서 배경 이미지를 어떻게 구현할 것인가에 대해서 고민했었는데 이런저런 방법을 시도한 결과 아래처럼 나름대로 원하는 결과를 만들어낼 수 있었기에 그 과정을 포스팅해본다. 먼저 배경 이미지를 보면 특정 색조(예시에서는 파란색)로 씌인 것을 알 수 있다. 이를 구현하려면 배경 이미지의 opacity 속성을 조절하고 그 위에 컬러 필터같은 느낌으로 rgba()를 이용하여 조정된 알파값의 색을 씌워야 할 것이라 생각하고 진행하였다. 처음으로 생각한 방법은 전체 HTML 요소를 감싸는 div를 생성하여 해당 div의 background-image 속성에 이미지를 삽입 후 opacity 속성을 0.7 정도로 설정하는..

웹/Front-End 2020.07.22
이전
1
다음
프로필사진

SOS团 Data Center.

YUKI.N >みえてる?

  • 분류 전체보기 (199)
    • SOS단의 행적 (5)
    • 공부 기록 (7)
    • 프로젝트 (30)
      • DVWA 실습 (29)
      • SimpleBBS (0)
      • 기타 (1)
    • 스터디 (0)
      • 블랙커피 스터디 레벨1 6기 (0)
    • 프로그래밍 (6)
      • C, C++ (4)
      • Java (1)
      • Python (1)
    • 웹 (3)
      • Front-End (1)
      • Back-End (2)
    • 데이터베이스 (5)
      • 이론 (1)
      • SQL (4)
    • Spring 프레임워크 (13)
      • 이론 (10)
      • 실습 (3)
    • 자료구조 (3)
    • 알고리즘 (43)
      • 프로그래머스 (0)
      • LeetCode (43)
    • 웹 해킹, 보안 (2)
      • 기초 지식 (2)
    • 리버싱 (6)
      • 기초 지식 (4)
      • Lena's Reversing for Newbie.. (2)
    • 챌린지 (49)
      • CrackMe (5)
      • Reversing.kr (5)
      • Webhacking.kr (1)
      • Wargame.kr (18)
      • los.rubiya.kr (20)
    • 리눅스 (3)
    • 기타 (12)
    • 참가 후기 (9)
    • 용어 정리 (2)

Tag

Queue, 한남대학교, 하드링크, dfs, Leetcode, 심볼릭링크, mysql, 세미나, SQL, 소프트링크, inorder, 프로그래머스, Stack, GDG, 구글 스타트업 캠퍼스, 슬기로운 인턴생활, 대전, Spring, Java, AskCompany,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

  2025. 07  
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

  • 스즈미야 하루히 마이너 갤러리
  • SOS Dan web site
  • Github

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.