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;/*不重复背景图片中间显示 ...
随机推荐
- AtCoder Regular Contest 101 D - Median of Medians
二分答案 然后前缀和+树状数组来判断这个答案是否大于等于数 如果我们对于一个查询,如果小于这个数令为1,大于这个数领为-1 将所有前缀和放在树状数组中,就可以查询所有sum_{l} < sum_ ...
- hession矩阵的计算与在图像中的应用
参考的一篇博客,文章地址:https://blog.csdn.net/lwzkiller/article/details/55050275 Hessian Matrix,它有着广泛的应用,如在牛顿方法 ...
- Cesium开发添加entity无法显示
无代码报错,js查询entity数量发现确实添加进去了.但是在底图上就是不显示. 有可能是跨域产生的问题.打开开发者工具Console栏.查看是不是存在跨域错误. 解决跨域后entity正常加载.
- Zookeeper-----Zookeeper概述
一:Zookeeper的概念? ZooKeeper是一种分布式协调服务,用于管理大型主机.在分布式环境中协调和管理服务是一个复杂的过程.ZooKeeper通过其简单的架构和API解决了这个问题.Zoo ...
- VSCode打开已有vuejs项目
转载自 https://blog.csdn.net/yoryky/article/details/78290443 下载安装并配置VSCode 随便百度上搜个最新的VSCode安装好后,点击Ctrl ...
- [T-ARA][너 때문에 미쳐][因为你而疯了]
歌词来源:http://music.163.com/#/song?id=5402880 作曲 : 赵英秀/김태현 [作曲 : 赵英秀/k/gim-Tae-hyeon] 作词 : 辉星 [作词 : 辉星 ...
- java-sun.misc.BASE64Decode AccessException
在使用sun.misc中base64类时,eclipse可能会报找不到Access异常 只需要修改一下访问方式即可,如下: 右键项目->属性->Javabulid path->jre ...
- Play on Words(欧拉回路)
Description Some of the secret doors contain a very interesting word puzzle. The team of archaeologi ...
- “取件帮”微信小程序宣传视频链接及内容介绍
1.视频链接 视频上传至优酷自频道,地址链接:http://v.youku.com/v_show/id_XMzg2NTM3OTc5Ng==.html?spm=a2hzp.8253869.0.0 2.视 ...
- 《linux内核与分析》第三周
20135130王川东 实验:构造一个简单的Linux系统的MenuOS 命令:qemu -kernel linux-3.18.6/arch/x86/boot/bzImage -initrd root ...