소개:

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

아름다운 경치를 위해 더 많은 돈을 써주세요 시간, 또 새벽 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="/static/imghwm/default1.png"  data-src="3-bg.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%"/ alt="CSS+html이 배경 이미지 채우기를 구현하는 방법에 대한 자세한 설명" >    
</p>
-->
</body>    
</html> </span>

위 내용은 CSS+html이 배경 이미지 채우기를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PM

CSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.

CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM

기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.

CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM

이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.