html背景定位,css background-position center left right top bottom代表意思

background-position:center right这里center right分别代表什么,引入对图片背景定位介绍

background-position是用于定位背景图片中对象中显示定位,比如图片作为背景时在对象内什么位置开始显示,显示样式等。比如让一个图片作为对象背景距离对象左边或右边多少间距开始显示,距离对象上边或下边多少间距开始显示,或者用常见left、right、center代表水平左、中、右显示图片,或者常见bottom、top代表下部(底部)、上部(顶部)显示图片。

一、语法结构   -   TOP

1、基础语法

background-position:10px(水平左中右) 20px(垂直上下)

Div{background-position:10px 20px}

代表图片作为对象背景时在对象内距离左侧10px和距离上边20px开始显示背景图片。

2、background-position的属性值介绍

background-position后可跟2个值,2个值用空格间隔开,第一个值,固定代表水平方向(横向)左、中、右距离,第二个值,固定代表垂直上、下距离。

3、background-position第一个值可根值

1)、具体数字+单位,如(可为正整数值 如10px,也可为负整数值 -10px 整数+单位)

2)、百分比,如(10%)

3)、left(背景图片靠对象左侧开始显示)

4)、center(图片作为对象背景水平居中显示)

5)、right(背景图片靠对象右侧开始显示)

4、background-position第二个值可根值

1)、具体数字+单位,如(可为正整数值 如10px,也可为负整数值 -10px 整数+单位)

2)、百分比,如(10%)

3)、top(背景图片靠对象紧贴顶部开始显示)

4)、bottom(背景图片靠对象紧贴底部开始显示)

background-position背景定位分析图

60d741fe1c746febbe60bd4f97a2f32c.png

css background-position语法结构剖析介绍图

二、相关阅读   -   TOP

三、总结   -   TOP

background-position是用于定位图片作为背景时,显示在对象位置,其值有2个,两个值分别代表意义不同,前者值是水平方向定位,后者值是垂直竖向定位。其两者都可以为正,可以为负,也可以使用固定几个英文单词(left、right、center、top、bottom)进行定位背景图片。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/436580.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【转】ABP源码分析三十二:ABP.SignalR

Realtime Realtime是ABP底层模块提供的功能,用于管理在线用户。它是使用SignalR实现给在线用户发送通知的功能的前提 IOnlineClient/OnlineClient: 封装在线用户的信息 OnlineClientManager/IOnlineClientManager: 用于提供基本维护在线用户的方法。其内部维护了…

【转】ABP源码分析三十三:ABP.Web

ABP.Web模块并不复杂,主要完成ABP系统的初始化和一些基础功能的实现。 AbpWebApplication : 继承自ASP.Net的HttpApplication类,主要完成下面三件事 一,在Application_Start完成AbpBootstrapper的初始化。整个ABP系统的初始化就是通过AbpBoo…

【转】ABP源码分析三十四:ABP.Web.Mvc

ABP.Web.Mvc模块主要完成两个任务: 第一,通过自定义的AbpController抽象基类封装ABP核心模块中的功能,以便利的方式提供给我们创建controller使用。 第二,一些常见的基础功能的实现。 AbpController:这是一个抽象基类…

地球化学图解系统GCDPlot 0.33

地球化学 图解 系统GCDPlot 0.33发布,新增了Excel 2007支持。下载 地址:GCDPlot下载GCDPlot 是一个进行地球化学图解、CIPW计算的 Microsoft Excel VBA 程序,GCDPlot 可以使用 Excel 的数据以标准的 Excel 图表格式绘制各类地球化学图解&am…

【转】ABP源码分析三十五:ABP中动态WebAPI原理解析

动态WebAPI应该算是ABP中最Magic的功能之一了吧。开发人员无须定义继承自ApiController的类,只须重用Application Service中的类就可以对外提供WebAPI的功能,这应该算是对DRY的最佳诠释了. 如下图所示,一行代码就为所有实现了IApplicationSer…

jstl处理栏目与子栏目_Detelogy智能前处理设备微展厅P2:再添新品

时隔小半年,新一轮Detelogy产品总览展示栏目再与大家见面。事不宜迟,点击视频即刻进入我们的智能前处理设备微展厅。 知乎视频​www.zhihu.com01 高效多样品前处理系统02 智能浓缩设备全系列03 智能湿法消解设备应用领域农残、兽残检测有机磷类、有机氯类…

【转】ABP源码分析三十六:ABP.Web.Api

这里的内容和ABP 动态webapi没有关系。除了动态webapi,ABP必然是支持使用传统的webApi。ABP.Web.Api模块中实现了一些同意的基础功能,以方便我们创建和使用asp.net webApi。 AbpApiController:这是一个抽象基类,继承自ApiControl…

408最后计算机网络题库,2021考研计算机统考408专业基础综合题库

**部分为历年考研真题。提供2009~2018年考研真题及参考答案,其中2009~2015年每道真题均提供详细答案解析,通过对真题的演练和分析,可以帮助学员牢牢抓住计算机学科专业基础综合考试的命题特点,提高复习效率…

Unity-Shader-渲染队列,ZTest,ZWrite

Unity-Shader-渲染队列,ZTest,ZWrite ZTest(深度测试)和ZWrite(深度写入)ZTest Less(深度小于当前缓存则通过)ZTest Greater(深度大于当前缓存则通过)ZTest L…

如何做好职业规划(乾卦)

职业一般来说会占用我们每个人生命中的大部分时间,而职业发展中变化莫测的因数常常令我们束手无策、捉襟见肘。在面对变化多端的情况时,中国人的传统智慧就发挥出最大的优势了。如何将快速变化 、不好掌控的事情处理得井井有条,这需要我们懂得…

850是什么意思_沃尔沃为什么不是一线豪华品牌?

1927年诞生的沃尔沃,它造车的历史比宝马还要略早几年。但经过近百年的发展,宝马品牌无论在国际上还是我们国内,以销量还是品牌含金量来看,都是众所公认的豪华品牌第一阵营成员(奔驰、宝马,奥迪)…

【转】ABP源码分析三十七:ABP.Web.Api Script Proxy API

ABP提供Script Proxy WebApi为所有的Dynamic WebApi生成访问这些WebApi的JQuery代理,AngularJs代理以及TypeScriptor代理。这些个代理就是javascript脚本,通过这些代理可以简单的访问Dynamic webApi。 如下实例演示一个最基本的应用场景。首先通过Script Proxy Web…

word2003如何设置护眼模式_手机屏幕的护眼模式是如何保护你的眼睛?

公司业务包括:二手机回收,二手机销售,配件批发,以及手机维修等业务,目前公司业务覆盖山西全境以及周边省市,在同行业有较高知名度。 随着智能手机的普及,大多数人也逐渐开始沉迷于每天的刷手…

WinCE系统的编译过程

作者:ARM-WinCE 在WinCE系统中,当我们完成了相关的开发和系统定制工作以后,会编译WinCE系统,最后生成NK.bin和NK.nb0。我现在用WinCE6.0在自己的PC上面编译一次用时19分16秒(有一天无聊,就测了一下)。下面介绍一下WinC…

【转】ABP源码分析三十八: ABP.Web.Api.OData

如果对OData不熟悉的话可参考OData的初步认识一文以获取OData的一些初步知识。 API.Odata 模块唯一用处就是提供了一个泛型版本的ODataController&#xff0c;实现了Controller代码的常用。 AbpODataEntityController<TEntity, TPrimaryKey>&#xff1a;使用ABP的repos…

饭卡可以用水冲洗吗_薄壁不锈钢水管真的可以满足大众用水健康管道的要求吗?...

我们都认识现如今的自来水的出厂干净程度达到安全、卫生&#xff0c;干净标准。但是&#xff0c;很是收到不少市民的投诉&#xff0c;说日常饮用的自来水有异味、浑浊、杂质&#xff0c;为何会出现这番现象呢&#xff0c;为此&#xff0c;我国也针对此研究调查&#xff0c;最后…

WinCE的快速启动

PXA270上的双启动功能已经实现了&#xff0c;但又引入了一个新问题&#xff0c;WinCE的启动太慢&#xff0c;大概需要2分钟&#xff01;这显然是不能忍受的。通过两天的努力&#xff0c;现在已经缩短到20秒&#xff0c;虽然还是有点长&#xff0c;但已改善不少了。先整理一下&a…

【转】ABP源码分析三十九:ABP.Hangfire

ABP对HangFire的集成主要是通过实现IBackgroundJobManager接口的HangfireBackgroundJobManager类完成的。 HangfireBackgroundJobManager:实现了接口IBackgroundJobManager中的方法EnqueueAsync&#xff0c;通过HangfireBackgroundJob完成Enqueue。重写了BackgroundWorkerBase…

计算机无法显示硬盘盘符,电脑硬盘不显示盘符怎么办 移动硬盘不显示盘符的原因...

电脑上是目前我们经常会使用到电子设备&#xff0c;其中电脑硬盘是电脑重要的零部件&#xff0c;它可以为电脑存储和运行各种文件&#xff0c;是电脑不可或缺的组件&#xff0c;然后用户在使用电脑的时候突然发现电脑硬盘不显示盘符该怎么办&#xff0c;移动硬盘显不示盘符的有…

百度云cdn设置州五年制大专_图说云原生:让云原生转型变得像种白菜一样简单...

序有一天&#xff0c;女朋友突然问我&#xff1a;“能不能跟我讲讲&#xff0c;你每天在开发的这些“天合”云原生平台、容器引擎、微服务&#xff0c;都是做什么的呀&#xff1f;”我说&#xff1a;“可以啊。简单来讲&#xff0c;我们的产品就是帮助客户实现云原生应用的上云…