(转)background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置。因为在默认情况下背景图片都是从设置了 background-position 属性的标记(例如 body 标记)在左上角开始出现的,但实际制作时设计者往往希望背景图片出现在指定的位置
background-position:在CSS中通过background-position属性可以调整背景图片的位置。因为在默认情况下背 景图片都是从设置了background-position属性的标记(例如body标记)在左上角开始出现的,但实际制作时设计者往往希望背景图片出现 在指定的位置。
background-position属性值:
属性值
效果
百分比
如:background-position:30% 70%
top
顶部
left
左边
right
右边
bottom
底部
center
居中
Bottom right
右下方
通过代码“background-position:30% 70%”的设置,使得背景图片的中心点在水平方向上处于30%的位置,在竖直方向上则位于70%的位置。
上面提到的“Bottom right”外,background-position的值还可以设置为top left、top
center、top right、center left、center right、bottom left和bottom center等
(转)background-position—CSS设置背景图片的位置的更多相关文章
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- css 设置背景图片模糊,内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...
- css设置背景图片,ie显示不了
本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...
- 使用CSS设置背景图片,图片比较大,完全显示在一个DIV中
做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...
- css设置背景图片自适应
CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...
- css 设置背景图片透明
最终效果: 背景图片css不变,再背景图片的里层元素设置css样式即可 opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
- css设置背景图片
background:pink;图片在背景图上面 background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满 ...
- css 设置背景图片铺满固定不动
#page{ position: relative; width: 100%; height: 100%; background-image:url(../img/bg.JPG); backgroun ...
- CSS background-image背景图片相关介绍
这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
随机推荐
- IOS开发之UIScrollView
一.UIScrollView的边界处理问题: bounds属性: (1)当bounces属性设置为YES时,当UIScrollView中图片滑动到边界的时候会出现弹动的效果,就像是Linux中的果冻效 ...
- asp.net 调用天气所遇到的问题
由于在项目用了显示天气的功能,原有的调用方法 直接通过 <iframe name="weather_inc" src="http://i.tianqi.c ...
- hibernate的get、load的方法的区别,IllegalArgument异常
关于hibernate中的load,get,以及延迟加载问题 今天在使用hibernate时,发现一异常: could not initialize proxy - no Session 查询资料之后 ...
- Python的多线程实现
概述 Python虚拟机使用GIL(Global Interpreter Lock,全局解释器锁)来实现互斥线程对共享资源的访问,暂时无法利用多处理器的优势. Python中,thread和threa ...
- Python数据类型list(列表)和tuple(元组)
list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> ...
- 编写C# Windows服务,用于杀死Zsd.exe进程
最近经常在我的xp系统进程中出现Zsd.exe进程.刚开始他占用内存不是很大.但是过了一段时间就会变成几百M 机器就会变得很卡,网上说Zsd可能是病毒.所以我就想要不写一个Windows服务,让他每隔 ...
- 基于fis的前端模块化和工程化方案
前端构建工具 面对日益复杂的前端环境以及前端技术.node技术的高速发展,前端的开发也越来越工程化,体系化,也就是出现了前端自动化构建工具.他们完成的任务目标基本是: js,css,图片的自动压缩合并 ...
- BZOJ 1007 [HNOI2008]水平可见直线
1007: [HNOI2008]水平可见直线 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 4453 Solved: 1636[Submit][Sta ...
- 【转】Eclipse导入library的时候报:Found 2 versions of android-support-v4.jar in the dependency list
原文网址:http://www.07net01.com/2015/03/779691.html 错误类型:Eclipse导入library的时候报:Found 2 versions of androi ...
- 向Int数组插入随机1到100
这是一个经典的面试题,考察了几个知识点 下边的代码是传统经典的做法 ]; ArrayList myList=new ArrayList(); Random rnd=new Random(); ) { ...