CSS+html이 배경 이미지 채우기를 구현하는 방법에 대한 자세한 설명
- 黄舟원래의
- 2017-07-22 09:16:525457검색
소개:
오늘은 개인 웰컴 인터페이스를 작성하고 싶었는데 프런트엔드를 또 망쳤는데 정말 급했습니다
아름다운 경치를 위해 더 많은 돈을 써주세요 시간, 또 새벽 3시 0.0
CSS는 단일 배경 이미지 채우기를 구현합니다
구현 방법 1:
body 요소의 background-image 속성을 직접 사용, 여러 브라우저 호환되며 기본적으로 요구사항을 충족합니다
배경색 추가: #22C3AA 이미지를 로드하기 전에 색상을 표시하세요
BUG: 페이지가 너무 작으면 하단에 틈이 생길 수 있습니다
상세 속성 w3school의 배경 속성
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello world</title>
<style type="text/css">
body {
margin: 0;
background-image: url('bg.jpg');
background-repeat:no-repeat;
background-position:0% 0%;
background-size:cover;
background-color: #22C3AA;
}
</style>
</head>
<body>
</body>
</html> </span>구현 방법 2:
p를 사용하면 그림이 브라우저 크기에 적응할 수 있으며 본문 버그가 없습니다
BUG: IE11 호환되지 않으면 아래에 녹색 선(본문 배경색)이 표시되는데 이는 매우 보기 흉합니다
참고: 배경 이미지를 HTML의 브라우저 크기에 맞게 조정
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello world</title>
<style type="text/css">
body {
margin: 0;
background-color: #22C3AA;
}
</style>
</head>
<body>
<!--
<p id="Layer1" style="position:absolute; width:100%; height:100%; background-color: #22C3AA; z-index:-1" >
<img src="3-bg.jpg" height="100%" width="100%"/>
</p>
-->
</body>
</html> </span>위 내용은 CSS+html이 배경 이미지 채우기를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.