关于CSS中background样式的repeat和no-repeat的坐标问题

背景图片我画了一个200px*200px的方格。记为test.jpg

其实是思考贴上的背景小图,与div边框之间的数据关系。从哪里开始贴的,横做坐标表示在哪个点。

例如  no-repeat -50px -50px.就说明是从框外(左右方向-50,上下-50)开始贴的。

HTML中选用的是高250px,宽500px的边框2px的长方形

1.未带repeat和no-repeat也无横纵坐标

HTML:代码

background:url(test.jpg) ">

结果:

2.仅有repeat-x

repeat-x url(test.jpg) ">

 

3.repeat-x 0px 100px

background: repeat-x 0px 100px url(test.jpg) ">

4.repeat-x 0px -100px

background: repeat-x 0px -100px url(test.jpg) ">

5.repeat-x -50px -100px

background: repeat-x -50px -100px url(test.jpg) ">

6.repeat-x -50px 100px

background: repeat-x -50px 100px url(test.jpg) ">

7.repeat-x 50px 100px

repeat-x 50px 100px url(test.jpg) ">


 8.repeat-x bottom(诡异)

repeat-x bottom url(test.jpg) ">

repeat-x top:(也诡异,不规范,为何不从00开始呢?)

9.repeat-x left(靠小图左从左边中间平铺)


 repeat-x right(靠小图右从右边按照X轴平铺)


注意repeat-y与repeat-x结果相似。只能用repeat-y bottom/top,否则出错

10.no-repeat 

no-repeat  url(test.jpg) ">

no-repeat top

no-repeat top  url(test.jpg) ">

注: bottom则是居中靠下

no-repeat left

注意:no-repeat right则是居中靠右

11.no-repeat left 100px(靠左边,则左为0,x坐标取0,只写上下)

no-repeat left 100px url(test.jpg) ">

no-repeat right 100px(靠右边则右边为0,只写上下方向,取正100)

background: no-repeat right 100px url(test.jpg) ">

12.no-repeat 100px bottom (靠下(代表上下),所以只用写左右,100px)

no-repeat 100px  bottom url(test.jpg) ">

注:同理no-repeat 100px top 这种写法也正确

13.no-repeat -50px -50px 

14.no-repeat -50px 50px (距离左边-50px,上边50px)

15.no-repeat -50px (距离左边-50px,上下默认,居中)

 

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

同理no-repeat left 50px =no-repeat 0px 50px(左边0,上面50)

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

类似:no-repeat right bottom是靠div右下角贴

时间: 2024-08-25 23:09:15

关于CSS中background样式的repeat和no-repeat的坐标问题的相关文章

css中background背景属性概

css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径)  no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径)  no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径)  no-repeat right top;/*不重复背景图片右上方显示*

css中background背景属性概述

background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示*/ background:url(背景图片路径) no-repeat bottom center;/*不重复背景图片底部中间显示*/ background:url(背景图片路径) no-repeat right top;/*不重复背景图片右上方显示*/ background:url(背景图片路径)

CSS中的样式覆盖原则

规则一:由于继承而发生样式冲突时,最近祖先获胜(最近原则).CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况: <html> <head> <title>rule 1</title> <style> body {color:black;} p {color:blue;} </style> </head> <body> <p>welcome to <strong>

css中 background设置

css2中有五个与背景相关的属性.它们是: background-color:完全填充背景的颜色 background-image:用作背景的图片 background-position:确定背景图片的位置 background-repeat:确定背景图片是否重复铺平 background-attachment:确定背景图片是否随页面滚动                                                                                

CSS中background属性详解

CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-color:#色码; 背景色彩 Exp: background-image:url(背景图案.jpg,gif,bmp); background-color:#FFFFFF; background-color : tra CSS背景属性 background css 说明 background-imag

CSS中background:url(图片) 不能显示的问题

刚刚碰到一个奇怪的问题,这样一段CSS代码: 1 .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题,俄,百度了好久终于让我给找到了真正的问题在哪? 在url(imagepath)里的这个imagepath(图片路径).原来它是相对于.css文件所在的文件夹,也就是调用css文件夹下的子文件夹来获取路径地址, 通过浏览器调试,可以看到浏览器获取路径是从css下面的img来找我的图片的,但是 我的im

css中table样式

border-spacing:设置相邻单元格的边框间的距离; border-collapse:设置表格的边框是否被合并为一个单一的边框:{separate/collapse/inherit(IE不支持该属性)} text-align:水平对齐方式{left/center/right} vertical-align:设置垂直对齐方式{top/center/bottom} caption-side:设置表格标题的放置方式{top/bottom/inherit} empty-cells:隐藏表格中空单

css中格子样式的实现

期末成绩出来,CSAPP总算没有挂,能过个好年了! 好了,这次的需求是这样的: 如图,在父盒子中放入子盒子,子盒子的宽度为50%(33%.25%类似),使得呈现以上效果,看似简单,其实还是有一些繁琐的,具体的代码为 .box{ width: 400px; height: 400px; padding: 5px; background-color: #CCC; border-radius: 10px; } .block{ float: left; width: 50%; height: 50%;

css中字体样式通用设置

body{ font-family: "helvetica Neue", helvetica, arial, "microsoft yahei ui", "microsoft yahei", simhei, "\5BBB\4F53", simsun, sans-serif; }