배경에 영상을 삽입하는데 질문드립니다

배경에 영상을 삽입하는데 질문드립니다

QA

배경에 영상을 삽입하는데 질문드립니다

답변 4

본문

백그라운드로 영상을 넣었고

그위에 텍스트를 넣었는데

영상이 밝아서 폰트에 그림자도 넣고 해도 글씨가 잘 안보이더라구요

 

그래서 제가 어느 사이트에서 본진 잘 기억이 안나는데

영상위에 패턴이 흐리게 들어가고 어두운 배경을 살짝 깔아놓은 느낌이 있는데

 

이게 영상에 편집을 한건지 아니면 css 로 한건지

 

css로 한거라면 소스가 궁금합니다

이 질문에 댓글 쓰기 :

답변 4

아래 애들을 공부해 보세요.

https://homzzang.com/b/css-108 (position)

https://homzzang.com/b/css-113 (z_index)

https://homzzang.com/b/css-119 (opacity)

https://homzzang.com/b/css-276 (rgba)

 

불투명한 레이어를 위로 올리기 위해서 after 가상 클래스를 이용하는 방법도 있습니다.


클래스::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
}

이런 구성도 참고하실 수 있을 듯합니다.

css 로 뒷배경을 넣으시면 됩니다. 우선순위를 잘 고려하셔야 하구요.

부모요소에 position:relative; 를 선언하고,

배경이 들어갈 자식요소에

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

background:rgba(0,0,0,0.5);

이런식으로 뒷 배경을 깔아주시면 됩니다.

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 40
© SIRSOFT
현재 페이지 제일 처음으로