배경에 영상을 삽입하는데 질문드립니다
본문
백그라운드로 영상을 넣었고
그위에 텍스트를 넣었는데
영상이 밝아서 폰트에 그림자도 넣고 해도 글씨가 잘 안보이더라구요
그래서 제가 어느 사이트에서 본진 잘 기억이 안나는데
영상위에 패턴이 흐리게 들어가고 어두운 배경을 살짝 깔아놓은 느낌이 있는데
이게 영상에 편집을 한건지 아니면 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);
이런식으로 뒷 배경을 깔아주시면 됩니다.
참고링크가 있어야 쉽게 알수있습니다
css로 했다면 div로 영상위를 덮고 배경을 투명도 조정해서 올렸을거에요
답변을 작성하시기 전에 로그인 해주세요.
