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

Question

백그라운드로 영상을 넣었고

그위에 텍스트를 넣었는데

영상이 밝아서 폰트에 그림자도 넣고 해도 글씨가 잘 안보이더라구요

 

그래서 제가 어느 사이트에서 본진 잘 기억이 안나는데

영상위에 패턴이 흐리게 들어가고 어두운 배경을 살짝 깔아놓은 느낌이 있는데

 

이게 영상에 편집을 한건지 아니면 css 로 한건지

 

css로 한거라면 소스가 궁금합니다

sinbi · Accepted Answer

아래 애들을 공부해 보세요.

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)

서야 · Answer

불투명한 레이어를 위로 올리기 위해서 after 가상 클래스를 이용하는 방법도 있습니다.

[code]

클래스::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background: rgba(0, 0, 0, 0.3);

}

[/code]

이런 구성도 참고하실 수 있을 듯합니다.

병원에서일해요 · Answer

참고링크가 있어야 쉽게 알수있습니다

 

css로 했다면 div로 영상위를 덮고 배경을 투명도 조정해서 올렸을거에요

DSLOVE · Answer

css 로 뒷배경을 넣으시면 됩니다. 우선순위를 잘 고려하셔야 하구요.

부모요소에 position:relative; 를 선언하고,

배경이 들어갈 자식요소에

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

background:rgba(0,0,0,0.5);

이런식으로 뒷 배경을 깔아주시면 됩니다.

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

답변 4개

공유하기