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）

推荐阅读

ip
CSS3 背景图片裁剪与定位技巧

本文详细介绍了如何使用 CSS3 的 background-clip 和 background-origin 属性来裁剪和定位背景图片，以及如何通过 background-size 控制背景图片的尺寸。 ... [详细]

蜡笔小新 2024-11-16 17:57:57
go
深入解析WebP图片格式及其应用

随着互联网技术的发展，无论是PC端还是移动端，图片数据流量占据了很大比重。尤其在高分辨率屏幕普及的背景下，如何在保证图片质量的同时减少文件大小，成为了亟待解决的问题。本文将详细介绍Google推出的WebP图片格式，探讨其在实际项目中的应用及优化策略。 ... [详细]

蜡笔小新 2024-11-20 16:31:47
go
优化 DOM 以提升 JavaScript 性能

本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能，包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]

蜡笔小新 2024-11-21 18:16:19
go
二维码的实现与应用

本文介绍了二维码的基本概念、分类及其优缺点，并详细描述了如何使用Java编程语言结合第三方库（如ZXing和qrcode.jar）来实现二维码的生成与解析。 ... [详细]

蜡笔小新 2024-11-21 17:10:15
byte
Requests库的基本使用方法

本文介绍了Python中Requests库的基础用法，包括如何安装、GET和POST请求的实现、如何处理Cookies和Headers，以及如何解析JSON响应。相比urllib库，Requests库提供了更为简洁高效的接口来处理HTTP请求。 ... [详细]

蜡笔小新 2024-11-21 13:17:41
ip
深入理解：AJAX学习指南

本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用，旨在为初学者提供全面的学习资料。 ... [详细]

蜡笔小新 2024-11-20 17:58:54
ip
探索百度WebFE团队打造的强大HTML5上传插件Web Uploader

本文将详细介绍由百度WebFE团队开发的Web Uploader，这是一款集成了HTML5与Flash技术的上传组件，以其卓越的用户体验和强大的功能著称。 ... [详细]

蜡笔小新 2024-11-20 14:51:32
utf-8
php + layui 文件上传以及拖拽上传

HTML:　　将文件拖拽到此区域 ... [详细]

蜡笔小新 2024-11-20 14:27:32
substring
IC卡操作功能实现

本文介绍了如何通过C#语言调用动态链接库（DLL）中的函数来实现IC卡的基本操作，包括初始化设备、设置密码模式、获取设备状态等，并详细展示了将TextBox中的数据写入IC卡的具体实现方法。 ... [详细]

蜡笔小新 2024-11-21 11:02:19
jsp
iOS 应用生命周期详解

本文详细介绍了iOS应用的生命周期，包括各个状态及其转换过程中的关键方法调用。 ... [详细]

蜡笔小新 2024-11-20 23:23:07
jsp
利用Windows EFS实现文件夹加密

Windows操作系统提供了Encrypting File System (EFS)作为内置的数据加密工具，特别适用于对NTFS分区上的文件和文件夹进行加密处理。本文将详细介绍如何使用EFS加密文件夹，以及加密过程中的注意事项。 ... [详细]

蜡笔小新 2024-11-20 18:57:46
jsp
如何在PHP中安装Xdebug扩展

本文介绍了如何从PECL下载并编译安装Xdebug扩展，以及如何配置PHP和PHPStorm以启用调试功能。 ... [详细]

蜡笔小新 2024-11-20 18:31:50
go
java写简易五子棋游戏。

importjava.io.*;importjava.util.*;publicclass五子棋游戏{staticintm1;staticintn1;staticfinalintS ... [详细]

蜡笔小新 2024-11-20 17:34:54
jsp
解决Visual Studio Code中PHP Intelephense误报问题

PHP作为一种高度灵活的编程语言，其代码结构可能导致Intelephense插件在某些情况下报告不必要的错误或警告。自1.3.3版本起，Intelephense引入了多个配置选项，允许用户根据具体的工作环境和编程风格调整这些诊断信息的显示。 ... [详细]

蜡笔小新 2024-11-20 16:47:16
utf-8
Android SOAP 请求失败：服务器无法处理请求，参数值不能为空

在尝试使用 Android 发送 SOAP 请求时遇到错误，服务器返回 '无法处理请求' 的信息，并指出某个值不能为 null。本文探讨了可能的原因及解决方案。 ... [详细]

蜡笔小新 2024-11-20 13:01:10

zpy7005434

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

Tags | 热门标签

RankList | 热门文章