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）

推荐阅读

port
基于layUI的图片上传前预览功能的2种实现方式

本文介绍了基于layUI的图片上传前预览功能的两种实现方式：一种是使用blob+FileReader，另一种是使用layUI自带的参数。通过选择文件后点击文件名，在页面中间弹窗内预览图片。其中，layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块，并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]

蜡笔小新 2023-12-14 17:06:58
port
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18
java
OC学习笔记之@property和@synthesize

本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]

蜡笔小新 2023-12-14 12:05:06
java
javascript – 概述在Firefox上无法正常工作

我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观：而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]

蜡笔小新 2023-12-14 10:20:38
text
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05
text
高质量SQL书写的30条建议

本文提供了30条关于优化SQL的建议，包括避免使用select *，使用具体字段，以及使用limit 1等。这些建议是基于实际开发经验总结出来的，旨在帮助读者优化SQL查询。 ... [详细]

蜡笔小新 2023-12-13 13:24:33
split
Html5-Canvas实现简易的抽奖转盘效果

本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果，同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码，并展示了实现的基本效果。 ... [详细]

蜡笔小新 2023-12-13 06:02:20
input
如何在HTML中获取鼠标的当前位置

本文介绍了在HTML中获取鼠标当前位置的三种方法，分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]

蜡笔小新 2023-12-11 13:04:00
input
macOS Big Sur全新设计大版本更新，10+个值得关注的新功能

本文介绍了Apple发布的新一代操作系统macOS Big Sur，该系统采用全新的界面设计，包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出，macOS Big Sur的设计与iPadOS越来越接近，结合了去年iPadOS对鼠标的完善等功能。 ... [详细]

蜡笔小新 2023-12-10 19:53:41
ip
网页播放视频的三种实现方式

本文介绍了网页播放视频的三种实现方式，分别是使用html5的video标签、使用flash来播放以及使用object标签。其中，推荐使用html5的video标签来简单播放视频，但有些老的浏览器不支持html5。另外，还可以使用flash来播放视频，需要使用object标签。 ... [详细]

蜡笔小新 2023-12-10 13:24:30
text
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
const
Webpack5内置处理图片资源的配置方法

本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]

蜡笔小新 2023-12-14 15:39:51
java
Android中高级面试必知必会，积累总结

本文介绍了Android中高级面试的必知必会内容，并总结了相关经验。文章指出，如今的Android市场对开发人员的要求更高，需要更专业的人才。同时，文章还给出了针对Android岗位的职责和要求，并提供了简历突出的建议。 ... [详细]

蜡笔小新 2023-12-14 14:53:02
text
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
text
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33

zpy7005434

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

Tags | 热门标签

RankList | 热门文章