소개:

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

아름다운 경치를 위해 더 많은 돈을 써주세요 시간, 또 새벽 3시 0.0

CSS는 단일 배경 이미지 채우기를 구현합니다

구현 방법 1:

body 요소의 background-image 속성을 직접 사용, 여러 브라우저 호환되며 기본적으로 요구사항을 충족합니다

배경색 추가: #22C3AA 이미지를 로드하기 전에 색상을 표시하세요

BUG: 페이지가 너무 작으면 하단에 틈이 생길 수 있습니다

상세 속성 w3school의 배경 속성

&lt;span style=&quot;font-size:14px;&quot;&gt;&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;    
&lt;html&gt;    
&lt;head&gt;    
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;    
&lt;title&gt;hello world&lt;/title&gt;    
 
&lt;style type=&quot;text/css&quot;&gt;
body {
    margin: 0;
    background-image: url(&#39;bg.jpg&#39;);  
    background-repeat:no-repeat;
        background-position:0% 0%;
    background-size:cover;
    background-color: #22C3AA;
}
&lt;/style&gt;
 
&lt;/head&gt;    
&lt;body&gt;
&lt;/body&gt;    
&lt;/html&gt; &lt;/span&gt;

로그인 후 복사

구현 방법 2:

p를 사용하면 그림이 브라우저 크기에 적응할 수 있으며 본문 버그가 없습니다

BUG: IE11 호환되지 않으면 아래에 녹색 선(본문 배경색)이 표시되는데 이는 매우 보기 흉합니다

참고: 배경 이미지를 HTML의 브라우저 크기에 맞게 조정

&lt;span style=&quot;font-size:14px;&quot;&gt;&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;    
&lt;html&gt;    
&lt;head&gt;    
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;    
&lt;title&gt;hello world&lt;/title&gt;    
 
&lt;style type=&quot;text/css&quot;&gt;
body {
    margin: 0;  
    background-color: #22C3AA;
}
&lt;/style&gt;
 
&lt;/head&gt;    
&lt;body&gt;
&lt;!--
&lt;p id=&quot;Layer1&quot; style=&quot;position:absolute; width:100%; height:100%; background-color: #22C3AA; z-index:-1&quot; &gt;    
&lt;img src=&quot;3-bg.jpg&quot; height=&quot;100%&quot; width=&quot;100%&quot;/&gt;    
&lt;/p&gt;
--&gt;
&lt;/body&gt;    
&lt;/html&gt; &lt;/span&gt;