菜单

CSS背景图片定位,css背景图片

2018年11月15日 - Bootstrap

同样、 网页中上加图的主意来零星栽

CSS背景图片定位,css背景图片

以网页开发被我们常得对图纸展开剪切(如下图)来使,而不是独家提供单身的图形来调用,常见的比方页面背景,按钮图标等,这样做的利就是削减请求次数,节省时间和带富。

div{ background-image: url(“1234.png”); background-repeat: no-repeat;
background-position: 0px -100px; }

性解释:

background-image : none | url ( url )

none

:

默认值。无背景图

url ( url )

:

使用绝对或相对 url 地址指定背景图像

background-repeat : repeat | no-repeat | repeat-x |
repeat-y

repeat

:

默认值。背景图像在纵向和横向上平铺

no-repeat

:

背景图像不平铺

repeat-x

:

背景图像仅在横向上平铺

repeat-y

:

背景图像仅在纵向上平铺

background-position : length || length
background-position : position || position

length

:

百分数 | 由浮点数字和单位标识符组成的长度值。

position

:

top | center | bottom | left | center | right

background-position属性说明:

得先指定 background-image 属性。

默认值为: 0% 0% 。此时背景图片左上角将被固化为器皿的左上角。

假设只是指定了一个价值,该值将用来横坐标。纵坐标将默认为 50%
。如果指定了少于个价,第二单价值将用于纵坐标。

恒定图像位置来三栽艺术:百分比、像素值、对齐方式.

1、对齐方式

针对齐方式有5独值top、botton、lef、right、center,分别对应顶部对旅,底部对同步,左对同步,右对共同,居中对共同(对一起就是容器的某部单方面跟图片的附和边重叠)

<html> <head> <style> div{ background-image:
url(“browseBtn.png”); background-repeat: no-repeat; cursor: hand; width:
80px; height: 24px; } .button1{ background-position: top; } .button2{
background-position: center; } .button3{ background-position: bottom; }
</style> <script> function clickButton() {
document.getElementById(‘button’).className = “button2”; } function
dblclick() { document.getElementById(‘button’).className = “button3″; }
</script> </head> <body> <div id=”button”
class=”button1″ onclick=”clickButton()”
ondblclick=”dblclick()”></div> </body> </html>

显示力量:

<html> <head> <style> .but1, .but2, .but3, .but4{
background-image: url(“ui-icons.png”); background-repeat: no-repeat;
float: left; cursor: hand; /*border: 1px solid;*/ } .but1{ width:
14px; height: 18px; border-right-width:0px; background-position: -113px
-190px; } .but2{ width: 14px; height: 18px; border-right-width:0px;
background-position: -113px -126px; } .but3{ width: 14px; height: 18px;
border-right-width:0px; background-position: 0px -110px; } .but4{ width:
14px; height: 18px; background-position: -240px -126px; } </style>
</head> <body> <div class=”but1″></div> <div
class=”but2″></div> <div class=”but3″></div>
<div class=”but4″></div> </body> </html>

功能如下:

(容器的财大气粗/高度-图片的财大气粗/高度) x 百细分比 = 像素值

<html> <head> <style> .but1, .but2, .but3, .but4{
background-image: url(“1234.png”); background-repeat: no-repeat; width:
100px; height: 100px; float: left; } .but1{ background-position: 0% 0%;
} .but2{ background-position: 0px 33.33%; } .but3{ background-position:
0px 66.66%; } .but4{ background-position: 0px 100%; } </style>
</head> <body> <div class=”but1″></div> <div
class=”but2″></div> <div class=”but3″></div>
<div class=”but4″></div> </body> </html>

力量如下:

图片 1

以身作则下载:

http://pan.baidu.com/s/12aMz8

同栽是:通过<img>标签直接插入到html中

CSS背景图片定位技术

background-position:-150px 0px
这句话的意思,在这图形的x轴150px处和Y轴0处之交叉点的确定!也尽管是原则性!

永恒技术就是是管网站的略微icon放到一摆设良之pic里面通过不同的X、Y的坐标取值,得到不同之pic!

遵照阿里巴巴的这个pic img.china.alibaba.com/…bg.png
 

另外一样种是:通过css背景属性添加

问问背景图片是怎用CSS定位的?我指的免是定位图片位置,而是一定一布置背景图片中许多图形中之一个图形?

background:url(xxxx.jpg) -100px -150px no-repeat;

其间-100px是因图片沿Y轴向上移动100个像从;
-150px是恃图片沿X轴向左移动150独像素。
公可团结测试一下,当然,你要是想一定一整张背景图里的 15×15之
图片的话,这个设置背景图的容器也如如为
15×15的高低,不然有或会见将别的部分为展示出的。
 

http://www.bkjia.com/Javascript/878797.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/878797.htmlTechArticleCSS背景图片定位,css背景图片
在网页开发被我们常常要对图纸展开分(如下图)来行使,而未是独家提供单身的图纸来调用,常见的如…

 

 

居中方法:水平居中的text-align:center 和 margin:0 auto



极客学院例子
http://www.jikexueyuan.com/course/656_3.html?ss=1

css背景图片的设置:

CSS背景属性Background详解

 

概述

CSS2 中生出5只主要的背景(background)属性,它们是:

* background-color: 指定填充背景的颜料。

* background-image: 引用图片作为背景。

* background-position: 指定元素背景图片的职。

* background-repeat: 决定是否再背景图片。

* background-attachment: 决定背景图是否随页面滚动。

多背景

新属性:背景修剪(background-clip)

新属性:背景原点(background-origin)

新属性: 背景尺寸(background-size)

新属性:(background-break)

背景色(background-color)的改进

背景平铺(background-repeat)的改善

背景附着(background-attachment)的改良

 

新属性:背景原点(background-origin)

这个特性和 background-position
结合起来用。可以自边框,内补白或者内容盒子开始计 background-position
(类似于 background-clip)。

* background-origin: border-box;
以边框为原点开始计算 background-position.
* background-origin: padding-box;
以内补白为原点开始盘算 background-position
* background-origin: content-box;
因为内容盒子为原点开始计 background-position
对于 background-clip 和 background-origin 不同的一个分解参照 CSS3.inf


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图