CSS背景位置y|backgroundpositiony

作者：zpy7005434 | 来源：互联网 | 2023-10-16 16:28

css,背景,位置,y,background,

background-position-y 属性用于设置初始状态时背景图片在垂直方向上的位置,这个位置相对于通过 background-origin定义的背景层的原点进行定位. 需要获得更多的信息可以查看background-position属性,这个属性已经得到了长久且广泛的支持.

注意:background-position-y 设定的值会被 background或者是background-position的简写属性的background-position-x后面的值所覆盖.

/* Keyword values */ background-position-y: top; background-position-y: center; background-position-y: bottom; /*  values */ background-position-y: 25%; /*  values */ background-position-y: 0px; background-position-y: 1cm; background-position-y: 8em; /* side-relative values */ background-position-y: bottom 3px; background-position-y: bottom 10%; /* Multiple values */ background-position-y: 0px, center; /* Global values */ background-position-y: inherit; background-position-y: initial; background-position-y: unset;

初始值	top
适用元素	all elements
是否是继承属性	no
Percentages	refer to height of background positioning area minus height of background image
适用媒体	visual
计算值	A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

值

top将背景图片的上边界与背景位置层的上边界对齐.

center将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐.bottom将背景图片的下边界与背景位置层的下边界对齐.

通过直接设定具体的数值,该数值定义了背景图片垂直方向的上边界相对于当前背景层(content-box/padding-box/border-box)的垂直方向上边界的偏移量,默认情况下是padding-box.

通过百分比的设置,该百分比定义了背景图片垂直方向的上边界相对于当前背景层的垂直方向上边界的偏移百分比,从而得到偏移量,该偏移量的计算方法是:(当前背景层的高-背景图片的高) * 百分比,高度差和百分比都保留符号。

正式语法

[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#where <length-percentage> = <length> | <percentage>

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 4The definition of 'background-position-y' in that specification.	Editor's Draft	Initial specification of longhand subproperties of background-position, to match longstanding implementations.

浏览器兼容性

Feature	Chrome	Firefox	Edge	Internet Explorer	Opera	Safari
Basic Support	(Yes)	49.0	12	6	(Yes)	(Yes)
Two-value syntax (support for offsets from any edge)	(No)	49.0	12	9.0	(No)	(No)

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	(Yes)	(Yes)	(Yes)	49.0	?	?	?
Two-value syntax (support for offsets from any edge)	(No)	(No)	(Yes)	49.0	?	(No)	(No)

另见

background-position

background-position-x

background-position-inline

background-position-block

多重背景（Multiple backgrounds）

推荐阅读

io
Python 内存管理机制详解

本文深入探讨了Python的内存管理机制，涵盖了垃圾回收、引用计数和内存池机制。通过具体示例和专业解释，帮助读者理解Python如何高效地管理和释放内存资源。 ... [详细]

蜡笔小新 2024-12-22 19:27:56
io
Appium + Java 自动化测试中处理页面空白区域点击问题

在进行移动应用自动化测试时，有时会遇到某些页面没有返回按钮，只能通过点击空白区域返回的情况。本文将探讨如何在Appium + Java环境中有效解决此类问题，并提供详细的解决方案。 ... [详细]

蜡笔小新 2024-12-22 17:30:25
io
利用Selenium与ChromeDriver实现豆瓣网页全屏截图

本文介绍了一种使用Selenium和ChromeDriver结合Python代码，轻松实现对豆瓣网站进行完整页面截图的方法。该方法不仅简单易行，而且解决了新版Selenium不再支持PhantomJS的问题。 ... [详细]

蜡笔小新 2024-12-22 15:17:55
io
深入解析：Android 视频处理开源框架

本文将详细介绍多个流行的 Android 视频处理开源框架，包括 ijkplayer、FFmpeg、Vitamio、ExoPlayer 等。每个框架都有其独特的优势和应用场景，帮助开发者更高效地进行视频处理和播放。 ... [详细]

蜡笔小新 2024-12-21 19:49:35
io
无需重启MySQL服务即可生效my.cnf配置文件修改

通常情况下，修改my.cnf配置文件后需要重启MySQL服务才能使新参数生效。然而，通过特定命令可以在不重启服务的情况下实现配置的即时更新。本文将详细介绍如何在线调整MySQL配置，并验证其有效性。 ... [详细]

蜡笔小新 2024-12-21 14:26:22
js
如何清除Chrome浏览器地址栏的特定历史记录

在使用Chrome浏览器时，你可能会发现地址栏保存了大量浏览记录。有时你可能希望删除某些特定的历史记录而不影响其他数据。本文将详细介绍如何单独删除地址栏中的特定记录以及批量清除所有历史记录的方法。 ... [详细]

蜡笔小新 2024-12-22 17:14:01
js
气象对比分析

本文探讨了不同地区和时间段的天气模式，通过详细的图表和数据分析，揭示了气候变化的趋势及其对环境和社会的影响。 ... [详细]

蜡笔小新 2024-12-21 19:39:55
io
HDU 1536: S-Nim 游戏中的 SG 博弈分析

探讨 HDU 1536 题目，即 S-Nim 游戏的博弈策略。通过 SG 函数分析游戏胜负的关键，并介绍如何编程实现解决方案。 ... [详细]

蜡笔小新 2024-12-21 18:26:33
io
yikesnews第11期：微软Office两个0day和一个提权0day

点击阅读原文可点击链接根据法国大选被黑客干扰，发送了带漏洞的文档Trumps_Attack_on_Syria_English.docx而此漏洞与ESET&FireEy ... [详细]

蜡笔小新 2024-12-21 16:24:32
io
深入解析动态代理模式：23种设计模式之三

在设计模式中，动态代理模式是应用最为广泛的一种代理模式。它允许我们在运行时动态创建代理对象，并在调用方法时进行增强处理。本文将详细介绍动态代理的实现机制及其应用场景。 ... [详细]

蜡笔小新 2024-12-21 15:46:52
js
深入理解ExtJS：从入门到精通

本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析，帮助初学者快速掌握ExtJS的核心概念，并提供实用技巧和最佳实践。 ... [详细]

蜡笔小新 2024-12-21 15:41:04
js
iOS 7 苹果开发者账号申请指南

本文详细介绍如何在 iOS 7 环境下申请苹果开发者账号，涵盖从访问开发者网站到最终激活账号的完整流程。包括选择个人或企业账号类型、付款方式及注意事项等。 ... [详细]

蜡笔小新 2024-12-21 10:20:50
js
Android WebView自适应布局与优化

本文详细介绍了如何在Android 4.4及以上版本中配置WebView以实现内容的自动高度调整和屏幕适配，确保中文显示正常，并提供代码示例。 ... [详细]

蜡笔小新 2024-12-21 10:05:50
io
CSS选择器与XPath在Selenium中的元素定位对比

本文详细比较了CSS选择器和XPath在Selenium中通过页面结构定位元素的优劣，并提供了具体的代码示例，帮助读者理解两者在不同场景下的适用性。 ... [详细]

蜡笔小新 2024-12-21 08:56:18
input
计算整数位数与基础编程示例

本文介绍了如何通过Java代码计算一个整数的位数，并展示了多个基础编程示例，包括求和、平均分计算、条件判断等。 ... [详细]

蜡笔小新 2024-12-20 23:46:25

zpy7005434

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章