CSS에서 배경 스타일 반복 및 반복 안 함을 위한 샘플 코드
- 黄舟원래의
- 2017-07-27 13:18:433937검색
CSS
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>New Document</title>
<meta name="generator" content="EverEdit" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
div{
width:400px;
height:200px;
padding:8px;
border:1px solid #96c2f1;
}
</style>
</head>
<body>
<div style="width:200px; height:100px; border: 1px solid #ff0000;">
</div>
<div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff;width:400px">
<img alt="pic" src="zf.jpg">
</div>
<div style="background:url(zf.jpg);">
</div>
<div style="background:repeat-x url(zf.jpg);">
1.repeat-x url(zf.jpg);
</div>
<div style="background:repeat-y url(zf.jpg);">
2.repeat-y url(zf.jpg);
</div>
<div style="background:repeat-x 0px 50px url(zf.jpg);">
3.repeat-x 0px 50px url(zf.jpg);
</div>
<div style="background:repeat 25px 25px url(zf.jpg);">
4.repeat 25px 25px url(zf.jpg);
</div>
<div style="background:repeat-x bottom url(zf.jpg);">
5.repeat-x bottom url(zf.jpg);
</div>
<div style="background:repeat-x left url(zf.jpg);">
6.repeat-x left url(zf.jpg);
</div>
<div style="background:no-repeat url(zf.jpg);">
7.no-repeat url(zf.jpg);
</div>
<div style="background:no-repeat top url(zf.jpg);">
8.no-repeat top url(zf.jpg);
</div>
<div style="background:no-repeat left url(zf.jpg);">
9.no-repeat left url(zf.jpg);
</div>
<div style="background:no-repeat left 100px url(zf.jpg);">
10.no-repeat left 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下
</div>
<div style="background:no-repeat right 100px url(zf.jpg);">
11.no-repeat right 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下
</div>
<div style="background:no-repeat 100px bottom url(zf.jpg);">
12.no-repeat 100px bottom url(zf.jpg);靠下（代表上下），所以只用写左右，100px
</div>
<div style="background:no-repeat -50px 50px url(zf.jpg);">
13.no-repeat -50px 50px url(zf.jpg);距离左边-50px，上边50px
</div>
<div style="background:no-repeat -50px url(zf.jpg);">
14.no-repeat -50px 距离左边-50px，上下默认，居中
</div>
<div style="background:no-repeat -50px top url(zf.jpg);">
15.no-repeat -50px top = no-repeat -50px 0px (距离div边界左边-50，上边0px)
</div>
<div style="background:no-repeat left top url(zf.jpg);">
16.no-repeat left top (靠左上，=(0px，0px),=只有no-repeat
</div>
</body>
</html>
위 내용은 CSS에서 배경 스타일 반복 및 반복 안 함을 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.