CSS로 배경 이미지를 타일링 가능하게 만드는 방법은 무엇입니까? CSS 배경 이미지를 타일링하는 네 가지 방법 소개-CSS 튜토리얼-php.cn

CSS로 배경 이미지를 타일링 가능하게 만드는 방법은 무엇입니까? CSS 배경 이미지를 타일링하는 네 가지 방법 소개

不言

풀어 주다： 2018-10-08 14:11:16

원래의

34877명이 탐색했습니다.

웹 디자인 과정에서 배경 이미지를 타일링해야 하는 경우가 있습니다. 이렇게 하면 전체 웹 페이지가 보기 좋게 보일 수 있기 때문입니다. 본문 너비와 높이를 설정하지 않고도 이미지 타일을 직접 타일링할 수 있습니다. 페이지에서 배경 이미지 타일을 만드는 방법은 무엇입니까? 다음으로, CSS로 배경 이미지 타일을 만드는 방법을 소개하겠습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

먼저 배경 이미지 타일링의 CSS 설정을 살펴보겠습니다.

repeat: 기본 모드, 배경을 완전히 타일링합니다.

no-repeat: X축과 Y축 방향으로 타일링하지 않습니다.

# 🎜🎜#repeat-x: 배경을 가로로 타일링합니다.

repeat-y: 배경을 세로로 타일링합니다.

CSS에서 이 4가지 배경 이미지 타일의 구현 코드를 살펴보겠습니다.

css 배경 이미지 타일링 코드:

<html>
<head>
<style type="text/css">
    #content { 
        border:1px solid #000fff; 
        height:500px; 
        background-image:url(http://img12.3lian.com/gaoqing02/01/58/85.jpg); 
        background-repeat: no-repeat; 
    } 
</style>
<div id="content">
</div> 
</body>
</html>

로그인 후 복사

css 배경 이미지 타일링 효과는 다음과 같습니다. #🎜 🎜#

CSS로 배경 이미지를 타일링 가능하게 만드는 방법은 무엇입니까? CSS 배경 이미지를 타일링하는 네 가지 방법 소개

css 배경 이미지 타일링이 X축과 Y축 방향 모두에서 타일링되지 않습니다.

#🎜 🎜#

<html>
<head>
<style type="text/css">
    #content { 
        border:1px solid #000fff; 
        height:500px; 
        background-image:url(images/tu.jpg); 
        background-repeat: no-repeat; 
    } 
</style>
<div id="content">
</div> 
</body>
</html>

로그인 후 복사

CSS 배경이 X축과 Y축 방향 모두에서 타일링되지 않습니다. 효과는 다음과 같습니다.

# 🎜🎜#css 배경 이미지 타일 가로 타일 배경: CSS로 배경 이미지를 타일링 가능하게 만드는 방법은 무엇입니까? CSS 배경 이미지를 타일링하는 네 가지 방법 소개

배경 이미지는 이제 X축, 즉 가로로만 타일링되고 세로로 타일링되지 않습니다. #🎜🎜 #

<html>
<head>
<style type="text/css">
    #content { 
        border:1px solid #000fff; 
        height:500px; 
        background-image:url(images/tu.jpg); 
        background-repeat: repeat-x; 
    } 
</style>
<div id="content">
</div> 
</body>
</html>

로그인 후 복사

css 가로 타일 배경 효과는 다음과 같습니다.

CSS 배경 이미지 플랫 수직 타일링 배경:

CSS로 배경 이미지를 타일링 가능하게 만드는 방법은 무엇입니까? CSS 배경 이미지를 타일링하는 네 가지 방법 소개

배경 이미지는 이제 Y축에만 타일링됩니다. 즉, 수평으로 타일링되고 수평으로 타일링되지 않습니다.

<html>
<head>
<style type="text/css">
    #content { 
        border:1px solid #000fff; 
        height:500px; 
        background-image:url(images/tu.jpg); 
        background-repeat: repeat-y; 
    } 
</style>
<div id="content">
</div> 
</body>
</html>

로그인 후 복사

#🎜🎜 ## 🎜🎜#css 세로 타일 배경 효과는 다음과 같습니다.

위 내용은 이 글의 전체 내용은 여기에 있습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트를 참고하세요.

위 내용은 CSS로 배경 이미지를 타일링 가능하게 만드는 방법은 무엇입니까? CSS 배경 이미지를 타일링하는 네 가지 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!