(转)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中设置元素背景图片及其背景图片样式的属性主要以下几个: ...
随机推荐
- jQuery中的模拟操作
jQuery中的模拟操作主要是通过trigger来触发,相当于页面加载完成后不需要用户点击按钮,就可以自动触发页面中的相关事件. trigger(type,[data])可以用来模拟触发自定义事件的触 ...
- Yii2的相关学习记录,alert等美化、confirm异步、session中的flash及小部件的使用(六)
呃,系统自带的alert.confirm等弹出框实在是难看,作为一个颜控,这能忍? 这里我用的是kartik-v/yii2-dialog,这个是基于bootstrap3-dialog这个来做了一些常用 ...
- Access数据库导入到mysql数据库中
做项目时需要查询手机号归属地的,用网上提供的接口,耗时太长,反应慢,只能自己在网上搜了一个包含所有手机号归属地的Access数据库,导入到自己的mysql数据库中 Access数据库导入到mysql中 ...
- phalcon的一些中文手册和帮助文档地址收集
1:中文官方网站:http://phalconphp.com/zh/ 挺好可以好好看文档 可安装http://bullsoft.org/phalcon-docs/这个去查找,这是个部分中文的手册! P ...
- OC & java 对比
Objective-C的语法对比(和Java的对比) Objective-C的语法对比(和Java的对比) 1.函数的对比 例子: helloworld方法 Java 语言: publi ...
- ubuntu后台运行命令行
ubuntu 程序后台运行几个方法 . 程序后加上“&” ,即 “./myjob &”, 将命令放入到一个作业队列中,可以用命令“jobs” 查看 . 将1中的命令放在 “()”中, ...
- 关于如何将C语言源文件转化为汇编文件
--转载自:http://blog.21ic.com/user1/6088/archives/2010/68469.html 方法:(假设当前工程中只有一个C代码文件) 第1步:新建一个工程,添加C文 ...
- HDU4666 Hyperspace(曼哈顿)
题目链接. 分析: 这是多校的一个题,当时没做出来.学长说让用multiset. 用multiset将每一个数的1<<dim个状态全部保存.假设状态 i, 最远曼哈顿距离应当是 max[i ...
- -_-#【Backbone】View
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HDOJ 2117 Just a Numble(模拟除法)
Problem Description Now give you two integers n m, you just tell me the m-th number after radix poin ...