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;/*不重复背景图片中间显示 ...
随机推荐
- [SHELL]查看端口，文件，服务关系的四个命令netstat,lsof,fuser,nmap
一,netstat (1)简介 netstat主要是用来打印系统网络的状态信息,当输入netstat后,输出如下: 可以看出,netstat的输出分为两个部分组成: 一个是Active Interne ...
- Quartz学习--三 Hello Jdbc Quartz! 和 demo 结尾
四. Hello JDBC Quartz! JDBC方式: 就是说通过数据库的jdbc链接来进行quartz的一个配置 Quartz支持了很好的支持 demo用例 使用mysql作为例子进行演示 相比 ...
- VS默认的类前缀（访问控制符）是internal
VS默认的类前缀(访问控制符)是internal 大家都知道VS默认新建的class的时候,class前面是什么都没有的,按照规则,这个class的可见性是internal,但是说实话,很多人包括我在 ...
- sql server block如何查询并kill
本帖提供两种做法,可避免在 SQL Server 事务锁定时产生的不正常或长时间阻塞,让用户和程序也无限期等待,甚至引起 connection pooling 连接数超过容量. 所谓的「阻塞」,是指当 ...
- xpath抓取的值有\r\n\t时，去掉的方法
解决办法: normalize-space() 例子: 原来的xpath为: user=selector.xpath('//*[@id="Con"]/tr[1]/th/text() ...
- java 中的 i=i++
记得大学刚开始学C语言时,老师就说:自增有两种形式,分别是i++和++i,i++表示的是先赋值后加1,++i是先加1后赋值,这样理解了很多年也没出现问题,直到遇到如下代码,我才怀疑我的理解是不是错了: ...
- ext4.1入门
ExtJS简介 Ext是一个Ajax框架,用于在客户端创建丰富多彩的web应用程序界面,是在Yahoo!UI的基础上发展而来的.官方网址:www.sencha.com ExtJS是一个用来开发前端应用 ...
- 读 《我是一只IT小小鸟》 有感
在没有上大学之前,我很迷茫自己将来要从事什么行业.有人说,人生的每一个阶段都应该有自己的目标,然而,我上大学之前,甚至大一下学期之前,我对于我今后的从业道路,人生规划,都是迷茫的.高考结束成绩出来后, ...
- iOS- Swift和Object-C的混合编程
1.前言 事实证明,在短时间内Swift还取代不了Object-C, 而且.... Apple Swift 开发小组的人说的:「We'll recommend people start with ...
- zabbix简介
(一)监控系统 初探 前言: 对于监控系统而言,首先必须搞清楚需要监控什么? (1)硬件设备和软件设备:服务器,路由器,交换机,I/O存储系统,操作系统,网络,各种应用程序 (2)各种指标:数据库宕机 ...