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;/*不重复背景图片中间显示 ...
随机推荐
- 《物质世界 (Outward)》证明不必压缩制作大型角色扮演游戏的时间
<物质世界>是一款雄心勃勃的开放世界角色扮演游戏 (RPG),设计这款游戏的公司规模只有您预期的三分之一.游戏中的一切都是动态的,拥有许多炫酷的系统设计,大家可以分屏合作掌控整个场景.参与 ...
- spring 属性文件加载接口---PropertySourceLoader
org.springframework.boot.config Interface PropertySourceLoader 实现类: PropertiesPropertySourceLoader, ...
- day09,10 函数
一.函数 什么是函数 函数: 对代码块和功能的封装和定义 定义一个事情或者功能. 等到需要的时候直接去用就好了. 那么这里定义的东西就是一个函数. 语法: def 函数名(形参): 函数体 函数名(实 ...
- conda环境管理
查看环境 conda env list 创建环境 conda create -n python36 python=3.6 进入环境 source activate python36 activate ...
- Hyperledger_Fabric_Model
Hyperledger_Fabric_Model 本部分描述了Hyperledger Fabric的主要设计特点 Assets: 资产定义使得任何东西都可以通过货币值在网络中交易,从食物到老爷车再到期 ...
- hbase Problem binding to node1/192.168.1.13:16020 : 地址已在使用
这是hbase 从0.9.x升级到1.x后HMaster与HRegionServer端口冲突问题 在hbase升级到1.0.0版本后,默认端口做了改动.其中16020端口是hmaster服务和hreg ...
- CS小分队第一阶段冲刺站立会议（5月14日）
昨日成果:为抽号计时器添加了第一类抽号,基本实现界面,功能出现了一些错误 遇到问题:我预想通过timer控件来实现随机抽号而拜托随机生成数,但是出现了只有个位随机滚动,其他位数不动的现象,我预计是数值 ...
- HDU 5391Z ball in Tina Town 数论
题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5391 bc: http://bestcoder.hdu.edu.cn/contests/c ...
- java——线性表接口实现
线性表是存储顺序牌类的数据时最常用的数据结构. 实现线性表有两种方式.第一种是使用数组存储线性表的元素.数组是动态创建的.超过数组的容量时,创建一个 新的更大的数组,并且将当前数组中的元素复制到新建的 ...
- PAT 甲级 1063 Set Similarity
https://pintia.cn/problem-sets/994805342720868352/problems/994805409175420928 Given two sets of inte ...