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. Java学习----Java数据类型

    1.基本数据类型(8种) 数字类型: 整数: byte :-128~+127 short :-32768~+32767 int: -2147483648~+2147483637 long 小数类型: ...

  2. 页面d初始化加载

    1.$(document).ready(function () { alert("Hello Word!"); }); 或简写为 2.$(function(){ alert(&qu ...

  3. 去掉所有的html标签

    去掉所有的HTML标签:$text=preg_replace('/<[^>]+>/','',$text); 去掉<img>标签:$text=preg_replace('/ ...

  4. js join()函数将数组转换成字符串

    join() 方法用于把数组中的所有元素放入一个字符串.作用是将数组转换为字符串,其作用和toString()相同. 元素是通过指定的分隔符进行分隔的. 例如: var asp=['H','ell', ...

  5. jQuery操作cookie

    验证jquery的cookie插件时才知道原先文件一直在桌面上放着执行发现没有效果,文件必须放在web服务器下面执行才会生效,晕菜! $.cookie(name,value,{expires: 7,p ...

  6. linux内核学习之二:编译内核

    在linux内核学习系列的第一课中讲述了搭建学习环境的过程(http://www.cnblogs.com/xiongyuanxiong/p/3523306.html),环境搭好后,马上就进入到下一环节 ...

  7. RAID磁盘阵列0、1、5、10

    raid0:(又称为Stripe或Striping--分条) (一句话:raid0 用多个磁盘串联起来成一个大磁盘,容量为几个的总和.优点:容量大,速度快.缺点:数据不安全) 即Data Stripp ...

  8. Linux的时钟管理

    本文转自博客园zhenwenxian的Linux时间管理,很详细,写得很不错,对初学者还是有很大帮助的. 时间管理在内核中占有非常重要的地位.相对于事件驱动,内核中有大量的函数都是基于时间驱动的.内核 ...

  9. 转:精美jQuery插件及源码 前端开发福利

    原文来自于:http://www.html5tricks.com/pretty-jquery-plugin.html jQuery是一个非常不错的javascript框架,很多前端开发者喜欢的原因不仅 ...

  10. Web分析日志分析2

    http://www.docin.com/p-649515490.html http://wenku.baidu.com/link?url=kB-83fbl1Zc3Y6U2BYLj-lKMWShe8Z ...