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>
<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>
这是使用的图片100px*100px，每个小方块是50px*50px。以下是效果图。
********************************************************************************
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;/*不重复背景图片中间显示 ...
随机推荐
- Unity Lighting - Light Types 灯光类型（八）
Light Types 灯光类型 We have now covered some of the project settings which need to be considered befo ...
- NO.06--聊一聊“币”吧！
近期博主更新的频率明显慢来 ,一来是最近的工作比较忙碌,几个项目几乎同时要上线.二来是在思考是不是把我平时生活中的一些事情写进来博客,不只是分享分享技术. 趁着区块链.比特币火爆,博主也算是略有涉猎, ...
- tendermint 跟tikv结合
import ( "fmt" "github.com/allegro/bigcache" "github.com/kooksee/usmint/cmn ...
- 实验一 MiniOS
实验一.命令解释程序的编写实验 商软1班 杨晶晶 201406114102 一. 实验目的 (1)掌握命令解释程序的原理: (2)掌握简单的DOS调用方法: (3)掌握C语言编程初 ...
- Python：三元运算
result=值1 if 条件 else 值2 如果条件为真,result=值1 如果条件为假,result=值2 例子: a,b,c=1,3,5 d=a if a>b else c print ...
- 404 Note Found -选题报告
目录 NABCD分析引用 N(Need,需求): A(Approach,做法): B(Benefit,好处): C(Competitors,竞争): D(Delivery,交付): 初期 中期 个人贡 ...
- 博弈--ZOJ 3084 S-Nim（SG）
题意: 首先输入K 表示一个集合的大小 之后输入集合 表示对于这对石子只能去这个集合中的元素的个数 之后输入 一个m 表示接下来对于这个集合要进行m次询问 之后m行 每行输入一个n 表示有n个堆 ...
- Ubuntu系统升级内核方法
一.查看内核版本 $ uname-sr //查看内核版本 二.去Ubuntu网站http://kernel.ubuntu.com/~kernel-ppa/mainline/下载所需版本的deb文件 w ...
- Java & hashCode作用
首先,想要明白hashCode的作用,你必须要先知道Java中的集合. 总的来说,Java中的集合(Collection)有两类,一类是List,再有一类是Set.你知道它们的区别吗?前者集合内的元素 ...
- String、StringBuilder与StringBuffer的区别
1.String类是public.final修饰的. 在Java中,被final修饰的类是不允许被继承的,并且String它的成员方法都默认为final方法. 查看源码得知,String类其实是通过c ...