CSS background-position随笔
1.定义和用法
background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始。
提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
默认值: | 0% 0% |
---|---|
继承性: | no |
版本: | CSS1 |
JavaScript 语法: | object.style.backgroundPosition="center" |
2.可能的值
值 | 描述 |
---|---|
|
如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% |
第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos |
第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
3.实例操作:
html+css代码:
渲染效果:
1.当background-position:-110px -70px;
效果图:
即是图片往上位移70px,往左位移110px;
2.当background-position:10px 10px;
效果图:
即是往右位移10px,往下位移10px;
3.background-position:100% 100%;
效果图:
图片处于容器元素的右下角,与 background-position:right bottom;效果等同。
等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。即往右50px
等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。即往下185px;
4.background-position:50% 50%;
效果图:
图片水平和垂直居中。与 background-position:center center;效果等同。
等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。
等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。
5.background-position:-50% -50%;
效果图:
等同于x:-{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。即向左移动了25px;
等同于y:-{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。即向上移动了92.5px;
6.background-position:-100% -100%;
效果图:
等同于x:-{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏。即向左移动了50px;
等同于y:-{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏。即向上移动了185px;
版权声明:本文为博主原创文章,未经博主允许不得转载。


CSS background-position随笔的更多相关文章
- CSS中position和header和overflow和background
<!DOCTYPE html> <!--CSS中position属性--> <html lang="en"> <head> < ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 关于CSS 的position定位问题
对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...
- CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...
- CSS background 属性详解
CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...
- CSS之position体验
目录: 1. position介绍 2. relative 3. position 4. fixed与static 5. 总结 1. position介绍 position最简单的理解就是元素位置的定 ...
- [CSS3] CSS Background Images
Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...
- css background transparent All In One
css background transparent All In One opacity ul { max-height: 100px; /* max-height: 187px; */ overf ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- PHP全栈开发(八):CSS Ⅲ background
设置背景颜色: div { background-color:#b0c4de; } 不仅可以给body标签设置背景颜色,还能给p,div,h标签设置背景颜色 设置背景图片: body { backgr ...
随机推荐
- UCS-2和UTF8的四个新知识点和新的疑问
最初的unicode编码是固定长度的,16位,也就是2两个字节代表一个字符,这样一共可以表示65536个字符.显然,这样要表示各种语言中所有的字符是远远不够的.Unicode4.0规范考虑到了这种情况 ...
- [cocos2d]场景切换以及切换进度显示
本文主要分两个部分叙述,第一是场景切换,第二是场景切换的进度显示. 一.场景切换 参考learn-iphone-and-ipad-cocos2d-game-development 第五章内容 coco ...
- 结论: blocking_query 是当前堵塞其他会话正在运行的SQL.而不是原始堵塞SQL
查看当前session线程号 mysql> select connection_id(); +-----------------+ | connection_id() | +---------- ...
- 【HDOJ】2851 Lode Runner
开始没理解题意.原来destinations是指路的序号.而不是点.DP. #include <stdio.h> #include <string.h> ]; typedef ...
- Android 写文件到手机
1)// 在手机中创建文件 FileOutputStream phone_outStream =this.openFileOutput("1.txt", Context.MODE_ ...
- POJ_3104_Drying_(二分,最小化最大值)
描述 http://poj.org/problem?id=3104 n件衣服,第i件衣服里面有水a[i],自然风干每分钟干1个水,用吹风机每分钟干k个水,但是同时只能对一件衣服使用吹风机,求干完所有衣 ...
- Oracle SQL编写注意事项
1.SQL语句用大写的;因为Oracle总是先解析SQL语句,把小写的字母转换成大写的再执行. 2.数据表最好起别名;因为便于sql优化器快速分析. 3.尽量不要使用 insert into tabl ...
- loadrunner 与Md5
loadrunner 与Md5 1.新建个c vuser脚本 2.把cmd5.h导入脚本 3.在脚本中,引入cmd5.h,可以在action前面加个void,但要屏蔽return 来自为知笔记(Wiz ...
- 前端模块化开发学习之gulp&browserify篇
随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...
- iw命令
iwconfig这个老工具已不推荐使用,iw支持大多新的设备并已被加入内核 iw help 查看帮助 iw dev wlan0 scan ...