CSS中background样式的repeat和no-repeat

自http://blog.sina.com.cn/s/blog_98eef7830101cv8t.html获取的知识，特此感谢。

 <!DOCTYPE html>

 <html lang="en" 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>

     &nbsp;

     <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff;width:400px">

         <img alt="pic" src="zf.jpg">

     </div>

     &nbsp;

     <div style="background:url(zf.jpg);">

     </div>

     &nbsp;

     <div style="background:repeat-x url(zf.jpg);">

         1.repeat-x url(zf.jpg);

     </div>

     &nbsp;

     <div style="background:repeat-y url(zf.jpg);">

         2.repeat-y url(zf.jpg);

     </div>

     &nbsp;

     <div style="background:repeat-x 0px 50px url(zf.jpg);">

         3.repeat-x 0px 50px url(zf.jpg);

     </div>

     &nbsp;

     <div style="background:repeat 25px 25px url(zf.jpg);">

         4.repeat 25px 25px url(zf.jpg);

     </div>

     &nbsp;

     <div style="background:repeat-x bottom url(zf.jpg);">

         5.repeat-x bottom url(zf.jpg);

     </div>

     &nbsp;

     <div style="background:repeat-x left url(zf.jpg);">

         6.repeat-x left url(zf.jpg);

     </div>

     &nbsp;

     <div style="background:no-repeat url(zf.jpg);">

         7.no-repeat url(zf.jpg);

     </div>

     &nbsp;

     <div style="background:no-repeat top  url(zf.jpg);">

         8.no-repeat top url(zf.jpg);

     </div>

     &nbsp;

     <div style="background:no-repeat left url(zf.jpg);">

         9.no-repeat left url(zf.jpg);

     </div>

     &nbsp;

     <div style="background:no-repeat left 100px url(zf.jpg);">

         10.no-repeat left 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下

     </div>

     &nbsp;

     <div style="background:no-repeat right 100px url(zf.jpg);">

         11.no-repeat right 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下

     </div>

     &nbsp;

     <div style="background:no-repeat 100px bottom url(zf.jpg);">

         12.no-repeat 100px bottom url(zf.jpg);靠下（代表上下），所以只用写左右，100px

     </div>

     &nbsp;

     <div style="background:no-repeat -50px 50px url(zf.jpg);">

         13.no-repeat -50px 50px url(zf.jpg);距离左边-50px，上边50px

     </div>

     &nbsp;

     <div style="background:no-repeat -50px  url(zf.jpg);">

         14.no-repeat -50px 距离左边-50px，上下默认，居中

     </div>

     &nbsp;

     <div style="background:no-repeat -50px  top url(zf.jpg);">

         15.no-repeat -50px  top = no-repeat -50px 0px (距离div边界左边-50，上边0px)

     </div>

     &nbsp;

     <div style="background:no-repeat left  top url(zf.jpg);">

         16.no-repeat left  top (靠左上，=(0px，0px),=只有no-repeat

     </div>

 </body>

 </html>

这是使用的图片100px*100px，每个小方块是50px*50px。以下是效果图。

********************************************************************************

1.repeat-x url(zf.jpg);

2.repeat-y url(zf.jpg);

3.repeat-x 0px 50px url(zf.jpg);

4.repeat 25px 25px url(zf.jpg);

5.repeat-x bottom url(zf.jpg);

6.repeat-x left url(zf.jpg);

7.no-repeat url(zf.jpg);

8.no-repeat top url(zf.jpg);

9.no-repeat left url(zf.jpg);

10.no-repeat left 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下

11.no-repeat right 100px url(zf.jpg);靠左边，则左为0，x坐标取0，只写上下

12.no-repeat 100px bottom url(zf.jpg);靠下（代表上下），所以只用写左右，100px

13.no-repeat -50px 50px url(zf.jpg);距离左边-50px，上边50px

14.no-repeat -50px 距离左边-50px，上下默认，居中

15.no-repeat -50px top = no-repeat -50px 0px (距离div边界左边-50，上边0px)

16.no-repeat left top (靠左上，=(0px，0px),=只有no-repeat

CSS中background样式的repeat和no-repeat的更多相关文章

CSS中background的用法
CSS中 background 是一个很基本的而且比较常用的样式 background : background-color || background-image || background-re ...
css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
CSS中的样式层叠机制Cascade
CSS中的样式层叠机制Cascade 一.样式冲突样式冲突是CSS渲染过程要解决的一个关键问题,样式冲突主要由两个原因造成: 元素包含了不同对象所赋予的样式:浏览器.用户.作者.其中,浏览器样式 ...
如何javascript获取css中的样式
obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢? 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是 ...
css中background合写样式
body { background: url("img_tree.png") no-repeat fixed 50% 50%/cover #ffffff ; } 等价于 body ...
CSS中background属性详解
CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...
CSS中background背景色的作用范围
在div中设置背景色:当border宽度很大时就要考虑一个问题,那就是背景的作用范围,是包括边框呢?还是不包括呢?很明显,又到浏览器产生分歧的时候了. 在IE中背景色的作用范围为:content+pa ...
CSS中background:url(图片) 不能显示的问题
刚刚碰到一个奇怪的问题,这样一段CSS代码: .pho6 { background: url(img/pho6.jpg); } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...
css中background背景属性概述
background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...

随机推荐

HDU 6438
Problem Description The Power Cube is used as a stash of Exotic Power. There are n cities numbered 1 ...
拉格朗日乘子法与KKT条件 && SVM中为什么要用对偶问题
参考链接: 拉格朗日乘子法和KKT条件 SVM为什么要从原始问题变为对偶问题来求解为什么要用对偶问题写在SVM之前——凸优化与对偶问题 1. 拉格朗日乘子法与KKT条件 2. SVM 为什么要从原 ...
CSS3实现图片渐入效果
很多网站都有那种图片渐入的效果,如:http://www.mi.com/minote/,这种效果用css3和一些js实现起来特别简单. 拿我之前做的页面来说一下怎么利用css3来实现图片渐入效果. 下 ...
pandas中DataFrame的ix，loc，iloc索引方式的异同
pandas中DataFrame的ix,loc,iloc索引方式的异同 1.loc: 按照标签索引,范围包括start和end 2.iloc: 在位置上进行索引,不包括end 3.ix: 先在inde ...
漫漫征途，java开发（未完待续）
前言 2018年,大二上,有幸加入服务外包实验室的考核,在考核中,主动加入xxx项目的后端,一是为了积累项目经验,二是为了学到更多东西,进入了之后发现原来要学的这么多,时间这么紧!但唯有学习! 心得体 ...
【第八周】beta阶段事后诸葛亮会议
本文由宫成荣,武志远共同编写组名: 新蜂组长: 武志远组员: 宫成荣谢孝淼杨柳李峤项目名称: java俄罗斯方块NEO 会议时间:2016.11.15 18:00~18:40 会议地点: ...
Java实现的词频统计——单元测试
前言:本次测试过程中发现了几个未知字符,这里将其转化为十六进制码对其加以区分. 1)保存统计结果的Result文件中显示如图: 2)将其复制到eclipse环境下的切分方法StringTokenize ...
PHP 生成条形码
<?php class BarCode128 { const STARTA = 103; const STARTB = 104; const STARTC = 105; const STOP = ...
win7 64位机ODBC的数据源DSN添加和移除问题
64位机器上ODBC的操作方法与32位机器是不一样的,如果直接从控制面板上-管理员工具-ODBC进去的话会发现User DSN以及System DSN里面都为空,ADD的时候连ODBC Driver都 ...
Node.js系列——（4）优势及场景
背景之前几篇系列文章简单介绍了node.js的安装配置及基本操作: Node.js系列--(1)安装配置与基本使用 Node.js系列--(2)发起get/post请求 Node.js系列--(3) ...

CSS中background样式的repeat和no-repeat

CSS中background样式的repeat和no-repeat的更多相关文章

随机推荐

热门专题