소개:

오늘은 개인 웰컴 인터페이스를 작성하고 싶었는데 프런트엔드를 또 망쳤는데 정말 급했습니다

아름다운 경치를 위해 더 많은 돈을 써주세요 시간, 또 새벽 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(&#39;bg.jpg&#39;);  
	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 중국어 웹사이트의 기타 관련 기사를 참조하세요!