在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...
background:transparent url(bg.jpg) no-repeat scroll 70px 40px; border:5px solid green; } 效果如图4: 图4 5、background-position:50% 50%; 图片水平和垂直居中。与 background-position:center center;效果等同。 等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。 等同于y:...
.box{background:url('../images/bg.jpg')no-repeat center;} 最后的那个center其实就是background-position值,就是告诉浏览器我这个背景图片要定位在元素box的中间位置。 看起来确实很简单,没什么可讲的,但是你真的对它所有用法都了如指掌吗? 一、关键字(top、bottom、left、right、center) 1. 两个值 back...
一.background-position:left top; 背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%; 二.background-position:
background-position的基本用法 background-position属性允许你指定背景图像在元素中的位置。它接受两个值,分别代表水平和垂直方向上的偏移量。语法如下: background-position: x y; 其中,x和y可以是以下几种形式: 长度值:如px、em等。例如: background-position:50px100px; ...
* background-color: 指定填充背景的颜色。 * background-image: 引用图片作为背景。 * background-position: 指定元素背景图片的位置。 * background-repeat: 决定是否重复背景图片。 * background-attachment: 决定背景图是否随页面滚动。 这些属性可以全部合并为一个缩写属性: background。 需要注意的一个要点是背...
CSS2 中有5个主要的背景(background)属性,它们是: * background-color: 指定填充背景的颜色。 * background-image: 引用图片作为背景。 * background-position: 指定元素背景图片的位置。 * background-repeat: 决定是否重复背景图片。 * background-attachment: 决定背景图是否随页面滚动。
background-position属性设置背景图像的起始位置 xpos ypos第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是长度px,关键字和百分数值 关键字成对出现left right top bottom center,如果仅指定一个关键字,其他值将会是"center" x% y%第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是...
background-position: right top; 1. 2. 设置背景位置为 左下角 :粉色区域是盒子的区域 , 图片背景位于盒子左下角 ; /* 设置背景位置 - 左下角 */ background-position: left bottom; 1. 2. 设置背景位置为 左下角 :粉色区域是盒子的区域 , 图片背景位于盒子左下角 ; 设置 bottom left 和 left bott...