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设置背景图片的位置的更多相关文章

  1. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  2. css 设置背景图片模糊，内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  3. css设置背景图片，ie显示不了

    本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...

  4. 使用CSS设置背景图片，图片比较大，完全显示在一个DIV中

    做的时候想要边框为比较好看的样式,需要UI切图并且放在div中,看起来会好看点 像这样的,我随便挑选了一个,UI帮我切图出来 需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且 ...

  5. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...

  6. css 设置背景图片透明

    最终效果: 背景图片css不变,再背景图片的里层元素设置css样式即可 opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */

  7. css设置背景图片

    background:pink;图片在背景图上面 background-image:url(food.jpg);一张图片铺满一行background-repeat:repeat-x;同一张图片多张铺满 ...

  8. css 设置背景图片铺满固定不动

    #page{ position: relative; width: 100%; height: 100%; background-image:url(../img/bg.JPG); backgroun ...

  9. CSS background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

随机推荐

  1. ecshop json类的使用

    ecshop中有2个地方使用了json,一个是cls_json.php文件,一个是transport.js文件. cls_json 封装了json类,可以调用里面的encode的方法,根据参数不同,进 ...

  2. lua curl动态链接库编译安装

    关于lua curl的资料网上并不是很多.找来找去就那么几个,所以我绝得很有必要把我的经验记下来,以防下次忘记                                              ...

  3. Watchcow

    传送门 题目大意: 给你一幅连通的图,要求从起点1开始走,要经过每条边刚好两次,并且最终回到1起点. 思路:将无向图转换成有向图求欧拉回路. #include<cstdio> #defin ...

  4. 机器学习公开课~~~~mooc

    https://class.coursera.org/ntumlone-001/class/index

  5. express+jade+bootstrap+mongdb simple CRUD test

    1:当前环境 y@y:~$ node --version && express -V && mongo --version v0.12.2 MongoDB shell ...

  6. IT的发展路径

    1.掌握更多的技能 2.掌握某一门深入的技能 3.掌握更多的工具 4.掌握业务

  7. Qt: 网络编程之UDP（理论+实例）

    http://blog.csdn.net/rl529014/article/details/52888525

  8. Zend framework重定向的方法

    zend framework重定向的方法有三种.render, forward, redirect.它们各自的用法是什么样子的呢?有什么区别呢? 一.render render是用来调视图用的,不会调 ...

  9. 【HDOJ】1107 武林

    简单模拟,题目数据太弱太弱了. /* 1107 */ #include <iostream> #include <cstdio> #include <cstring> ...

  10. springMVC+ mongdb + redis +Jedis 环境搭建

    环境信息: JDK1.7 : Eclipse 4.4.1 ; mongdb + mongVUE:mongDB的安装 redis的下载和安装:window下安装redis maven3.0.5 新建ma ...