最后的那个center其实就是background-position值,就是告诉浏览器我这个背景图片要定位在元素box的中间位置。 看起来确实很简单,没什么可讲的,但是你真的对它所有用法都了如指掌吗? 一、关键字(top、bottom、left、right、center) 1. 两个值 background-position可以取两个值,一个为横轴方向,一个为纵轴方向。 比...
一.background-position:left top; 背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%; 二.background-position:right bottom; 背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。等同于background- positon:100%...
等同于 background-position:0,0;也等同于background-position:0%,0%; 二.background-position:right bottom; 背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。等同于background- positon:100%,100%;也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器 (container)的高度-背景...
CSS background-position 属性实例 如何定位 background-image: body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } 尝试一下 » 标签定义及使用说明background-position 属性设置背景图像的起始位置。
background:transparent url(bg.jpg) no-repeat scroll 0 0; border:5px solid green; padding:50px; } 效果如图2: 图2 3、background-position:-70px -40px; 图片以容器左上角为参考向左偏移70px,向上偏移 40px,示例: .container{ width:300px; ...
CSS background-position 属性实例 如何定位background-image: body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } 尝试一下 » 标签定义及使用说明background-position属性设置背景图像的起始位置。
1、使用不同单位(最常用的是像素px)的数值:直接设置图像左上角在元素中的坐标,例如background-position:20px 20px。2、使用预定义的关键字:指定背景图像在元素中的对齐方式。l 水平方向值:left、center、right。l 垂直方向值:top、center、bottom。3、使用百分比:按背景图像和元素的指定点对齐。l 0% 0% 表示...
background:transparent url(bg.jpg) no-repeat scroll -70px -40px; border:5px solid green; } 1. 2. 3. 4. 5. 6. 效果如图3: 图3 4、background-position:70px 40px; 图片以容器左上角为参考向右偏移70px,向下偏移 40px,示例: .container{ ...
The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin.