css背景图片位置:background的position
position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的
1.background:url(../image/header.jpg) no-repeat left top; /*相当于0% 0%*/
表示背景图片在指定div的位置,从左上角开始
2.background:url(../image/header.jpg) no-repeat right bottom; /*相当于100% 100%*/
表示背景图片从指定div的右下角开始显示图片,并且背景图片右下角与div的右下角重合
3.background:url(../image/header.jpg) no-repeat 300px 200px;
即背景图片距div的左边界300px,距div的上边界200px。
4.background:url(../image/header.jpg) no-repeat 50% 50% ;
/* 相当于background:url(../image/header.jpg) no-repeat center ; */
背景图片在div中水平方向与竖直方向都居中显示
5.background:url(../image/header.jpg) no-repeat 300px; /*相当于300px 50%*/
若只写一个参数,则另一个参数默认为50%,即背景图片距div的左边300px,而竖直方向居中。
6.background:url(../image/header.jpg) no-repeat -300px -100px ;
背景图片相对于div左上角(0px,0px) 又向左移动了300px,向上移动了100px
7.background:url(../image/header.jpg) no-repeat 30% 30%;
背景图片的(30%, 30%)的点与其所属的div的(30%, 30%)的点对齐。
但注意:百分比值同时应用于元素div及其背景图像。
例如:
(1)当在某一元素里居中背景图像时,图像中被描述为50% 50%的点将与元素中同样描述的点对齐。
(2)要使背景图像横跨元素的三分之一,纵跨三分之二,可以按如下声明:
background:url(beijing.gif) no-repeat 33% 66%;
这就使得图像上相对于左上角水平为三分一,垂直为三分之二的那个点与元素中的同样的点重合。
注意,百分比的水平值总是在前面。如果将上例中的这两个百分比值交换位置,那么背景图像将被放于水平三分之二,垂直三分之一处。同样,当只给出一个百分比值时,这个值为水平值,而另一个垂直百分比值被假定为50%。当只有一个值给出时,另一个被假定为center。
css背景图片位置:background的position的更多相关文章
- css背景图片位置:background的position(转)
css背景图片位置:background的position position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的 1.backgroun ...
- CSS背景图片定位
原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...
- Bootstrap css背景图片的设置
一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...
- css背景图片拉伸 以及100% 满屏显示
如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...
- 【转】链接伪类(:hover)CSS背景图片有闪动BUG
来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...
- div css背景图片不显示
我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...
- 兼容各浏览器的css背景图片拉伸代码
需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...
- css背景图片拉伸
css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...
随机推荐
- 浅谈.net中的params关键字
先举个例子: 代码如下: class Program { static void Main(string[] args) { Console.WriteLine(Sum(1)); Console.Wr ...
- SQL反模式部分内容笔记
规范化: 1, 以一种我们能够理解的方式表达这个世界中的事物; 2, 减少数据冗余存储, 防止异常或者不一致的数据; 3, 支持完整性约束. Tips: 提高数据的性能不在此列表中. 意义: 规范化 ...
- PAT_1010 一元多项式求导
题目描述: 设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式: 以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数).数字间以空格分隔. ...
- HDU_1241 Oil Deposits(DFS深搜)
Problem Description The GeoSurvComp geologic survey company is responsible for detecting underground ...
- C# 绘制窗体客户非客户区要用WM_PAINT和WM_NCPAINT
窗体分为两部分:客户区(Client area)和非客户区(Non-Client area) WM_PAINT消息.OnPaint()方法.GetDC()API函数都是处理窗体客户区绘制的 而标题 ...
- [LeetCode OJ] Word Search 深度优先搜索DFS
Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from l ...
- 基于管道通知的百万并发长连接server模型
0.前言 最近突然想了解怎样设计一个支持百万连接的后台server架构. 要设计一个支持百万连接的后台server,我们首先要知道会有哪些因素限制后台server的高并发连接,这里想到的因素有以下几点 ...
- 取值对比ture of false加引号与不加引号的问题-----Bug笔记-160219
一.默认情况,当属性值为布尔值类型的时候对比判断不用加引号<input type="radio" name="city" value="BeiJ ...
- Struts2常规配置
默认配置文件名:struts.xml WEB-INF/classes下(放到src下) Struts2的有效常量可以查看 org\apache\struts2 下的 default.p ...
- django框架的网站发布后设置是否允许被别人iframe引用
例如: <iframe src="http://127.0.0.1:8008" style="width:100%;height:400px;">& ...