(转)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中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
随机推荐
- mybatis 学习笔记(4) —— 批量新增数据
1.业务是从前台传入List<T> ,在controller层接受参数,并进行批量新增操作. 2.需要处理的细节 a) mybatis可以支持批量新增,注意数据表需要将主键设置成自增列. ...
- DeDe内容调用img
文章内容页调用缩略图方法如下两种.第一种没有大小设置.原图显示.第二种.可以设大小, {dede:field.image/} <img src="{dede:field.litpic ...
- memcache锁
锁的使用,一般情况是针对并发或者我们希望程序(crontab的job)串行处理,我们加锁的办法有很多,像文件锁,数据库锁,或者memcache锁,这里关注一下memcache锁,针对memcache锁 ...
- 感性体验 Android 5.0 Lollipop
引言 Android5.0大概是在11月下旬开始进行OTA推送,博主手上的这台五太子(Nexus 5)也在前几天收到了Google的推送,博主当然是按耐不住赶紧FQ升级啦,但无奈的是这个大版本更新包有 ...
- 图示Servelet请求过程
静态文件的请求处理过程: 客户端浏览器向WebServer发送一个HTTP请求,WebServer解析HTTP请求,然后找到对应的静态文件,读取文件的内容,然后返回给客户端浏览器HTML文本,浏览器解 ...
- "Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list.xml,reason: Connection
"Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list.xml,reason: Conne ...
- 【HDOJ】2150 Pipe
计算几何的基础题目.是时候刷刷计算几何了. /* 2150 */ #include <cstdio> #include <cstring> #include <cstdl ...
- 【HDOJ】1078 FatMouse and Cheese
这道题目是典型的DFS+记忆化搜索, DP思想.符合:含重叠子问题,无后效性等特点. #include <cstdio> #include <cstring> #include ...
- thickbox 关于动态生成 无法跳出弹出框的问题
问题描述: 用jQuery动态生成thickbox的连接代码,发现没有效果. 原因: thickbox在页面加载后,会给a,input,area等绑定弹出事件. 通过tb_init(’a.thickb ...
- 【转】两分钟彻底让你明白Android Activity生命周期(图文)!----不错
原文网址:http://blog.csdn.net/android_tutor/article/details/5772285 大家好,今天给大家详解一下Android中Activity的生命周期,我 ...