DOCTYPE html>.img-total{cursor:pointer;//定义鼠标移入样式width:30px;//x轴终点height:30px;//y轴终点background-image:url(images/position.png);//图片位置background-size:120px 30px;//背景图片大小display:inline-block;}.img-home{background-position:0 0;//起点位置background-color:#23ccfe;}.i...
background-position 属性值 可以是 length 长度 , 也可以是 position 方位 ; length 长度 : 百分数 :如 50% ; 浮点数 + 单位 :如 : 150.5px ; position 方位 :设置的是 x 坐标的方位 和 y 坐标的方位 , 二者使用空格隔开 ; 左上右下 :top , bottom , left , right ; 中间:center 2、注意事项 ...
1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%; 注意,第一个表示水平,不是top,第二个是left。 上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。 前两种定位,都是将背...
CSS属性 - background-image CSS属性 - background-repeat CSS属性 - background-size CSS属性 - background-position CSS Sprite CSS Sprite编写建议 练习 CSS属性 - background
*zoom:1;/* 触发css hack 的layout*/ 四、position定位 position:relative;相对定位 不脱离文档流 发生位置改变时,原来的位置还占用 层级大于文档流其他元素(会盖在其他元素之上) 参照物是本身 给绝对定位当参照物-常用 相对定位同时设置top和bottom值时top生效。同时设置left和right时,left生效 ...
「css」 复制 body {margin: 0;padding: 0;}div {position: absolute;height: 100vh;width: 100vw;}.day {background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");background-size: ...
css2.1中,常见的背景属性有以下几种:(经常用到,要记住) background-color:#ff99ff;设置元素的背景颜色。 background-image:url(images/2.gif);将图像设置为背景。 background-repeat: no-repeat;设置背景图片是否重复及如何重复,默认平铺满。(重要)
.box{background:url('../images/bg.jpg')no-repeat center;} 最后的那个center其实就是background-position值,就是告诉浏览器我这个背景图片要定位在元素box的中间位置。 看起来确实很简单,没什么可讲的,但是你真的对它所有用法都了如指掌吗? 一、关键字(top、bottom、left、right、center) ...
现在我们来解答一下我们我们遇到的第一个问题,及background-position中的left top是相对于哪个box。答案是相对于padding-box的外边沿。 下面的HTML代码和CSS代码分别实现给一个class=“myp”的容器设置一副背景图片,背景图片的background-position属性值为left top。HTML代码如下: ...