HTML 문서에서 이미지를 배경으로 사용하는 방법은 무엇입니까?
- 青灯夜游원래의
- 2020-10-26 15:50:3862003검색
HTML에서는 body 태그에 CSS 배경 또는 배경 이미지 스타일을 설정하여 이미지를 배경으로 사용할 수 있습니다. 구문 형식은 "배경/배경-이미지:url("이미지 경로");"입니다.
(추천 튜토리얼: html 튜토리얼)
css 배경 또는 배경 이미지 속성을 사용하여 html 문서에서 이미지를 배경으로 설정할 수 있습니다. 배경은 하나의 명령문으로 모든 배경 속성을 설정할 수 있습니다. background-image는 사용할 하나 이상의 배경 이미지를 지정합니다.
배경으로 설정할 수 있는 속성은 background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-입니다. 첨부 파일 및 배경 이미지.
특별한 순서 없이 각 값을 공백으로 구분하세요. background: #FF0000 URL(smiley.gif)과 같은 값 중 일부만 허용될 수 있습니다.
예: 사진을 배경으로 사용
<html>
<head>
<style type="text/css">
body
{
background: url(bg.jpg) ;
/*background-image: url(bg.jpg);*/
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>렌더링:
이것은 여러 장의 사진을 타일링한 것입니다. 하나의 사진이 전체 화면을 차지하도록 하려면 배경 반복 속성을 사용하거나 배경 속성에 반복 없음 값을 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
/*background: url(bg.jpg) no-repeat;*/
background-image: url(bg.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>렌더링:
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 코스를 방문하세요! !
위 내용은 HTML 문서에서 이미지를 배경으로 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!