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）

推荐阅读

int
自己用过的一些比较有用的css3新属性【HTML】

web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开 ... [详细]

蜡笔小新 2024-12-24 19:26:54
web
解析：IE 浏览器中 IMG 元素 alt 属性的误用及其正确处理方式

在跨浏览器开发中，一个常见的问题是关于如何在鼠标悬停时显示图片提示信息。本文深入探讨了 IE 浏览器对 IMG 元素 alt 属性的特殊处理，并提供了最佳实践建议。 ... [详细]

蜡笔小新 2024-12-23 12:35:10
web
利用Selenium与ChromeDriver实现豆瓣网页全屏截图

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

蜡笔小新 2024-12-22 15:17:55
int
深入解析Android自定义View面试题

本文探讨了Android Launcher开发中自定义View的重要性，并通过一道经典的面试题，帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识，还提供了实际操作建议。 ... [详细]

蜡笔小新 2024-12-28 11:15:04
int
优化ListView性能

本文深入探讨了如何通过多种技术手段优化ListView的性能，包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]

蜡笔小新 2024-12-28 10:36:30
int
在Linux系统中配置并启动ActiveMQ

本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]

蜡笔小新 2024-12-27 14:38:54
config
解决Android 8.0上使用ChinaCock打印控件时扫码闪退问题

本文详细探讨了在Android 8.0设备上使用ChinaCock的TCCBarcodeScanner进行扫码时出现的应用闪退问题，并提供了解决方案。通过调整配置文件，可以有效避免这一问题。 ... [详细]

蜡笔小新 2024-12-27 10:10:31
int
移动 UI 设计基础：打造简洁高效的用户界面

本章将深入探讨移动 UI 设计的核心原则，帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧，您将能够创建出既美观又实用的移动应用。 ... [详细]

蜡笔小新 2024-12-27 08:43:40
filter
如何高效创建和使用字体图标

在Web和移动开发中，为什么选择字体图标？主要原因是其卓越的性能，可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程，并提供了专业建议。 ... [详细]

蜡笔小新 2024-12-26 20:48:44
int
RecyclerView初步学习(一)

RecyclerView初步学习(一)ReCyclerView提供了一种插件式的编程模式，除了提供ViewHolder缓存模式，还可以自定义动画，分割符，布局样式，相比于传统的ListVi ... [详细]

蜡笔小新 2024-12-26 20:24:01
range
使用 NSTimer 实现倒计时功能

本文介绍如何使用 NSTimer 实现倒计时功能，详细讲解了初始化方法、参数配置以及具体实现步骤。通过示例代码展示如何创建和管理定时器，确保在指定时间间隔内执行特定任务。 ... [详细]

蜡笔小新 2024-12-26 19:08:19
int
2023年京东Android面试真题解析与经验分享

本文由一位拥有6年Android开发经验的工程师撰写，详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]

蜡笔小新 2024-12-26 17:45:48
int
使用内置 Inspector 和 Chrome 调试 Node.js 应用

自 Node.js 6.3 版本起，调试功能已内置在核心模块中，无需额外安装 node-inspector 等工具。通过简单的命令即可启动调试模式，并利用 Chrome 浏览器进行高效的代码调试。 ... [详细]

蜡笔小新 2024-12-23 17:59:40
int
解决Selenium浏览器实例化位置导致的闪退问题

本文探讨了在使用Selenium进行自动化测试时，由于webdriver对象实例化位置不同而导致浏览器闪退的问题，并提供了详细的代码示例和解决方案。 ... [详细]

蜡笔小新 2024-12-23 16:09:49
int
如何清除Chrome浏览器地址栏的特定历史记录

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

蜡笔小新 2024-12-22 17:14:01

zpy7005434

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

Tags | 热门标签

RankList | 热门文章