테스트 사이트 - 개발 중인 베타 버전입니다

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

한번잘해보자 4년 전 조회 2,181

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

그위에 텍스트를 넣었는데

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

 

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

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

 

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

 

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

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
s
sinbi Expert
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)

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

4년 전

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

</p>

<p>클래스::after {</p>

<p>    content: '';</p>

<p>    position: absolute;</p>

<p>    width: 100%;</p>

<p>    height: 100%;</p>

<p>    top: 0;</p>

<p>    left: 0;</p>

<p>    background: rgba(0, 0, 0, 0.3);</p>

<p>}</p>

<p>

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

참고링크가 있어야 쉽게 알수있습니다

 

css로 했다면 div로 영상위를 덮고 배경을 투명도 조정해서 올렸을거에요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

D
4년 전

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

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

배경이 들어갈 자식요소에

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

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

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

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인