在CSS Backgrounds and Borders Module Level 3[1]中,background-position引入了新语法,可以先写边界关键字,再写长度值。如下,我们可以这样实现: 代码语言:javascript 复制 .bg-right{/* ... */background:url(https://p1.ssl.qhimg.com/t015bb5c7be246fb2af.jpg)no-repeat right center;background-position...
1、background-position:0 0; 背景图片的左上角将与容器元素的左上角对齐。该设置与background-position:left top;或者background-position:0% 0%;设置的效果是一致的。例如: .container{ width:300px; height:150px; background:transparent url(bg.jpg) no-repeat scroll 0 0; border:5px solid green; }...
.box{background:url('../images/bg.jpg')no-repeat center;} 最后的那个center其实就是background-position值,就是告诉浏览器我这个背景图片要定位在元素box的中间位置。 看起来确实很简单,没什么可讲的,但是你真的对它所有用法都了如指掌吗? 一、关键字(top、bottom、left、right、center) 1. 两个值 back...
background-position的基本用法 background-position属性允许你指定背景图像在元素中的位置。它接受两个值,分别代表水平和垂直方向上的偏移量。语法如下: background-position: x y; 其中,x和y可以是以下几种形式: 长度值:如px、em等。例如: background-position:50px100px; ...
* background-image: 引用图片作为背景。 * background-position: 指定元素背景图片的位置。 * background-repeat: 决定是否重复背景图片。 * background-attachment: 决定背景图是否随页面滚动。 这些属性可以全部合并为一个缩写属性: background。 需要注意的一个要点是背景占据元素 的所有内容区域,包括 padding 和...
1.定义和用法 background-position 属性设置背景图像的起始位置。 这个属性设置背景原图像(由background-image定义)的位置,背景图像如果要重复,将从这一点开始。 提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
在CSS中,background-position属性用于控制背景图片在元素中的位置。下面我将详细解释这个属性的用法,并提供示例代码。 1. background-position属性的作用 background-position属性用于指定背景图片在元素中的初始位置。当背景图片小于元素大小时,或者当背景图片不重复时(即background-repeat属性设置为no-repeat),这个属性尤...
background-position 属性可以用其它数值,关键词和百分比来指定,这比较有用,尤其是在元素尺寸不是用像素设置时。 关键词是不用解释的。x 轴上: * left* center* right y 轴上: * top* center* bottom 顺序方面和使用像素值时的顺序几乎一样,首先是 x 轴,其次是 y 轴,像这样: ...
定义和用法 CSS background-position属性设置背景图像的起始位置。 这个属性设置背景原图像(由CSS background-image定义)的位置,背景图像如果要重复,将从这一点开始。 提示:您需要把CSS background-attachment属性设置为"fixed",才能保证该属性在Firefox和Opera中正常工作。