【转】CSS之Background-Position left right center top bottom属性
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%;就是background-position:(1000-2000)*50%px,(500-30)*50%px;即background- position:-500px,235px;也就是背景图片从容器(container)的左上角向左移500px,向下移235px;
(这种情况背景图片应该用bg2.jpg才能看出效果,bg.jpg的高度太小效果不明显)
background-position:-50% -50%;
等同于left:-{{容器(container)的宽度—背景图片的宽度}*left百分比(百分比都取正值)},超出的部分隐藏。
等同于right:-{{容器(container)的高度—背景图片的高度}*right百分比(百分比都取正值)},超出的部分隐藏。
例如:background-position:-50% -50%;就是background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;即 background- position:-250px,-70px;也就是背景图片从容器(container)的左上角向左移250px,向上移70px;
转载地址:http://blog.csdn.net/jiangxindu1/article/details/39802187
【转】CSS之Background-Position left right center top bottom属性的更多相关文章
- position的用法(top, bottom, left, right 四个定位属性配合进行使用)
一般情况下 页面元素的定位方式是根据文档流也就是说默认的从上到下,从左到右的方式进行排列的,而将元素从文档流脱离出来显示的方式有两种,一种是 position 定位另一种是float 浮动,这里我们详 ...
- CSS中应用position的absolute和relative的属性制作浮动层
我的浮动层结构大概如下: <div id="father"> <div id="son"> </div> </div& ...
- HTML+CSS之background
第一个专题--background属性 今天写一下background属性,具体如下: 1.background-color:默认值:transparent,这是我们在做网页时,经常使用的属性,较为简 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- HTML+CSS--position大法好
其实在HTML和CSS的学习中,css的position属性应该是难点之一,难在你需要静下心来仔细搞清楚它的每一个值的意义.效果和用法.但是它的功能很强大,效果也是很令人惊艳的,因为你可以用它去实现一 ...
- css中的position 的absolute和relative的区别(转)
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...
- 装载:对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个 ...
随机推荐
- vue2.0+vue-video-player实现hls播放的案例
1. 安装依赖. npm install vue-video-player --save 2. 在main.js引入vue-video-player. import VueVideoPlayer fr ...
- rrt tree
package com.bim.rrt_20190529; import static java.lang.Math.pow;import static java.lang.Math.sqrt; im ...
- thymeleaf中img标签图片src路径问题
转载自:解决java - Thymeleaf conditional img src 正确写法. <img class="layui-nav-img" th:src=&quo ...
- [译] NAT - 网络地址转换(2016)
[译] NAT - 网络地址转换(2016) Published at 2019-02-17 | Last Update 译者序 本文翻译自 2016 年的一篇英文博客 NAT - Network A ...
- PhpStorm设置项目编码
因为工作中论坛项目用的是GBK编码.数据库也是GBK编码.模板也是GBK,所以为了以后修改程序不出现乱码问题,所以需要把我的PhpStorm中该项目也设置为GBK编码(默认是UTF8编码). 设置路径 ...
- Spark On YARN(Yarn-Cluster模式)启动流程源码分析(二)
转自:https://www.cnblogs.com/yy3b2007com/p/11087180.html 本章将针对yarn-cluster(--master yarn –deploy-mode ...
- [PyTorch] Facebook Research - Mask R-CNN Benchmark 的安装与测试
Github项目链接:https://github.com/facebookresearch/maskrcnn-benchmark maskrcnn_benchmark 安装步骤: 安装Anacond ...
- 《剑指offer》字符串专题 (牛客11.01)
字符串的题目难度不一,涉及到的考点有字符串处理.字符串匹配(自动机.正则).模拟,以及递归.动态规划等算法. 难度 题目 知识点 ☆ 02. 替换空格 从后往前 ☆☆ 27. 字符串的排列 回溯,St ...
- Ubuntu 修改登录界面,使用root用户登录
修改: sudo vi /etc/pam.d/gdm-autologin注释行 "auth requied pam_succeed_if.so user != root quiet succ ...
- CentOS 7 利用qemu模拟ARM vexpress A9开发板
听说qemu用于仿真arm很不错,今日就来试了一把.由于刚刚开始,了解的并不多.本文仅仅记录Qemu装载Linux kernel和busybox根文件系统的过程.后续将会深入了解仿真的其他内容. 先上 ...