CSS-背景图片位置 | background-position-低调大师

CSS-背景图片位置 | background-position

2018-09-11 754

ckground-position 指定背景图片的初始位置。这个初始位置是相对于以background-origin定义的背景位置图层来说的。

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset;

初始值	0% 0%
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	no
Percentages	refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
适用媒体	visual
计算值	a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage
Animation type	repeatable list of simple list of length, percentage, or calc
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

background-position属性被指定为一个或多个<position>值，用逗号分隔。

值

<position>是一个<position>，一到四个距元素边界2D位置的数值。可以给出相对值或绝对值。注意位置可以设置在盒模型外。

1值语法：值可能是：

关键字值center，它是图像的中心。

关键字值中的一个top，left，bottom，right。这指定了放置物品的边缘。另一个尺寸被设置为50％，因此该项目被放置在指定边缘的中间。

a<length>或<percentage>。这指定相对于左边缘的X坐标，Y坐标设置为50％。

2值语法：一个值定义X，另一个定义Y.每个值可以是：

关键字值中的一个top，left，bottom，right。如果left或者right在这里给出，那么这个定义了X，而另一个给定的值定义了Y.如果top或者bottom给定了，那么这个定义了Y而另一个定义了X.

<length>或<percentage>。如果另一个值是leftor right，那么这个值定义Y，相对于上边缘。如果另一个值是topor bottom，那么这个值定义X，相对于左边缘。如果两个值是<length>或<percentage>值，那么第一个定义X和第二个Y.

请注意：

如果一个值是top或bottom，那么另一个值可能不是top或bottom。

如果一个值是left或right，那么另一个值可能不是left或right。

这意味着“ top top"和left right”是无效的。

正式语法

<position>#where 
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
where 
<length-percentage> = <length> | <percentage>

示例

这三个示例中的每一个都使用CSS background创建一个包含星形图像的黄色矩形元素。在每个例子中，星形图像处于不同的位置。另外，第三个例子说明了如何为一个元素中的两个不同的背景图像指定位置。

HTML

<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>

CSS

/* Shared among all DIVS */
div {
  background-color: #FFEE99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/* background-position examples */

/* These examples use the background shorthand CSS property */
.exampleone {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
}

/*
Multiple background images: Each image is matched with the
corresponding position style, from first specified to last.
*/
.examplethree {
  background-image:    url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), 
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       center;
}

结果

规范

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'background-position' in that specification.	Candidate Recommendation	Adds support for multiple backgrounds and the four-value syntax. Modifies the percentage definition to match implementations.
CSS Level 2 (Revision 1)The definition of 'background-position' in that specification.	Recommendation	Allows for keyword values and <length> and <percentage> values to be mixed.
CSS Level 1The definition of 'background-position' in that specification.	Recommendation	Initial definition.

纠错

浏览器兼容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	1.0	12	1.0	4	3.5	1.0
Multiple backgrounds	1.0	12	3.6	9.0	10.5	1.3
Four-value syntax (support for offsets from any edge)	25.0	12	13.0	9.0	10.5	7.0

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)
Multiple backgrounds	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)
Four-value syntax (support for offsets from any edge)	(Yes)	(Yes)	(Yes)	13.0	(Yes)	(Yes)	(Yes)

微信关注我们

原文链接：https://yq.aliyun.com/articles/638680

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

CSS-背景来源 | background-origin

background-origin规定了指定背景图片background-image属性的原点位置的背景相对区域. /* Keyword values */ background-origin: border-box; background-origin: padding-box; background-origin: content-box; /* Global values */ background-origin: inherit; background-origin: initial; background-origin: unset; 请注意background-origin被忽略时background-attachment是fixed... 注意：当使用background-attachment为fixed时，该属性将被忽略不起作用。初始值 padding-box 适用元素 all elements. It also applies to ::first-letter and ::first-line. 是否是继承属性 no 适用媒体 visual 计算值 as spec...

2018-09-12

583

ackground-position-xCSS 属性设置水平方向的位置，与每个背景图片等位置层设置属性background-origin相关。更多信息请查看background-position属性，这个用的比较普遍。 /* Keyword values */ background-position-x: left; background-position-x: center; background-position-x: right; /* <percentage> values */ background-position-x: 25%; /* <length> values */ background-position-x: 0px; background-position-x: 1cm; background-position-x: 8em; /* side-relative values */ background-position-x: right 3px; background-position-x: left 25%; /* Multiple v...

2018-09-12

708

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。