CSS中background-position使用技巧
2016-03-13 10:23
701 查看
一.background-position:left top;
背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%;
二.background-position:right bottom;
背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。等同于background- positon:100%,100%;也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器 (container)的高度-背景图片的高度
三.background-position:500px 15px;。
背景图片从容器(container)左上角的地方向右移500px,向下移15px,超出的部分隐藏。
四.background-position:-500px -15px;。
背景图片从容器(container)左上角的地方向左移500px,向上移15px,超出的部分隐藏。
五.background-position:50% 50%;。
等同于left:{容器(container)的宽度—背景图片的宽度}*left百分比,超出的部分隐藏。等同于right:{容器(container)的高度—背景图片的高度}*right百分比,超出的部分隐藏。
六.background-position:-50% -50%;。
等同于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超出的部分隐藏。等同于 right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超出的部分隐藏。
总结:利用div大小和十字架原理,可以用background-position属性实现大图里面抠取小图。
背景图片的左上角和容器(container)的左上角对齐,超出的部分隐藏。等同于 background-position:0,0;也等同于background-position:0%,0%;
二.background-position:right bottom;
背景图片的右下角和容器(container)的右下角对齐,超出的部分隐藏。等同于background- positon:100%,100%;也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器 (container)的高度-背景图片的高度
三.background-position:500px 15px;。
背景图片从容器(container)左上角的地方向右移500px,向下移15px,超出的部分隐藏。
四.background-position:-500px -15px;。
背景图片从容器(container)左上角的地方向左移500px,向上移15px,超出的部分隐藏。
五.background-position:50% 50%;。
等同于left:{容器(container)的宽度—背景图片的宽度}*left百分比,超出的部分隐藏。等同于right:{容器(container)的高度—背景图片的高度}*right百分比,超出的部分隐藏。
六.background-position:-50% -50%;。
等同于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超出的部分隐藏。等同于 right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超出的部分隐藏。
总结:利用div大小和十字架原理,可以用background-position属性实现大图里面抠取小图。
相关文章推荐
- CSS 常用命名
- css3动画,阴影,加快页面加载,块级模式的小总结
- css各种手型集合(css禁止手型)
- css div inline内联 (行元素)和块状元素的转化
- CSS中position的4种定位详解
- CSS3 transitions 的几个demo01
- CSS3 transitions 的几个demo02
- CSS3 transitions 的几个demo03
- CSS学习笔记(一):作用方式
- CSS选择器总结
- CSS学习(十三)-文本换行符技巧
- CSS3 Background-clip
- CSS如何实现”右部宽度固定,左部自适应“的布局
- a标签的四个css伪类(link、visited、hover、active)样式理解
- css3:animation
- CSS 下拉菜单
- 获取样式
- CSS3实现图形曲线阴形和翘边阴影
- CSS布局一
- 【牛腩】HTML+CSS基础了解