CSS中关于background样式repeat与no-repeat的示例代码

来源：懂视网责编：小采时间：2020-11-27 18:50:22

CSS中关于background样式repeat与no-repeat的示例代码

CSS中关于background样式repeat与no-repeat的示例代码:CSS中关于background样式repeat与no-repeat的示例代码<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" />

推荐度：

点击下载本文 文档为doc格式

导读CSS中关于background样式repeat与no-repeat的示例代码:CSS中关于background样式repeat与no-repeat的示例代码<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" />

CSS中关于background样式repeat与no-repeat的示例代码

<!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中关于background样式repeat与no-repeat的示例代码

推荐度：

点击下载本文 文档为doc格式

标签： no-repeat css中关于background样式repeat与no-re css中关于background样式repeat与no-repeat的示例代码

热门焦点

CSS中关于background样式repeat与no-repeat的示例代码

CSS中关于background样式repeat与no-repeat的示例代码

CSS中关于background样式repeat与no-repeat的示例代码

最新推荐

猜你喜欢

热门推荐