CSS로 배경 이미지를 타일링 가능하게 만드는 방법은 무엇입니까? CSS 배경 이미지를 타일링하는 네 가지 방법 소개
- 不言원래의
- 2018-10-08 14:11:1634868검색
웹 디자인 과정에서 배경 이미지를 타일링해야 하는 경우가 있습니다. 이렇게 하면 전체 웹 페이지가 보기 좋게 보일 수 있기 때문입니다. 본문 너비와 높이를 설정하지 않고도 이미지 타일을 직접 타일링할 수 있습니다. 페이지에서 배경 이미지 타일을 만드는 방법은 무엇입니까? 다음으로, CSS로 배경 이미지 타일을 만드는 방법을 소개하겠습니다. 도움이 필요한 친구들이 참고할 수 있습니다.
먼저 배경 이미지 타일링의 CSS 설정을 살펴보겠습니다.
repeat: 기본 모드, 배경을 완전히 타일링합니다.
no-repeat: X축과 Y축 방향으로 타일링하지 않습니다.
# 🎜🎜#repeat-x: 배경을 가로로 타일링합니다.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 배경 이미지 타일링 효과는 다음과 같습니다. #🎜 🎜#
#🎜 🎜#
<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 배경 이미지 타일 가로 타일 배경: 
배경 이미지는 이제 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 배경 이미지 플랫 수직 타일링 배경:
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.