>  기사  >  웹 프론트엔드  >  웹페이지 바닥글의 배경 이미지

웹페이지 바닥글의 배경 이미지

巴扎黑
巴扎黑원래의
2017-07-21 09:17:566233검색

오늘 재미있는 문제가 발생했습니다. 웹사이트 바닥글에 배경 이미지를 추가하고 바닥글 하단에 내용을 작성하고 싶어서 바닥글에 배경을 추가하고 크기를 설정했습니다. 몇 마디로 시작하겠습니다. 방법:

1. 바닥글 하단에 배경을 추가하고 크기를 설정합니다.

2. 바닥글 안에 div를 추가하고 내용을 작성합니다.

문제: 내용 마진이나 패딩을 사용하면 고정된 값을 지정해야 하는데, 어느 날 배경이 바뀌면 재설정해야 하지 않을까요? 그래서 바이두는 스스로 생각해서 해결책을 찾았습니다.

1 padding-top: 410px;2 background: url('./img/footer.jpg') no-repeat center;3 background-size: 100%;4 background-position:top center;

원칙적으로 패딩은 배경 이미지 등의 콘텐츠로 채워질 수 있으므로 바닥글의 패딩은 - 상단을 위로 밀면 배경 이미지도 위로 이동될 수 있습니다. 물론 배경도 함께 변경되어야 합니다. top.이 기능은 패딩이 투명하다는 원리를 이용하여 구현되었습니다

친구 여러분, 생각해 보셨나요

위 내용은 웹페이지 바닥글의 배경 이미지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.