CSS background-position随笔_html/css_WEB-ITnose

1.定义和用法

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

2.可能的值

3.实例操作：

html+css代码：

渲染效果：

1.当background-position:-110px -70px;

效果图：

 即是图片往上位移70px,往左位移110px;

2.当background-position:10px 10px;

效果图:

话袋AI笔记

话袋AI笔记, 像聊天一样随时随地记录每一个想法，打造属于你的个人知识库，成为你的外挂大脑

47

查看详情

即是往右位移10px,往下位移10px;

3.background-position:100% 100%;

效果图：

图片处于容器元素的右下角，与 background-position:right bottom;效果等同。

等同于x：{容器(container)的宽度?背景图片的宽度}*x百分比，超出的部分隐藏。即往右50px
等同于y：{容器(container)的高度?背景图片的高度}*y百分比，超出的部分隐藏。即往下185px;

4.background-position:50% 50%;

效果图：

图片水平和垂直居中。与 background-position:center center;效果等同。

等同于x：{容器(container)的宽度?背景图片的宽度}*x百分比，超出的部分隐藏。
等同于y：{容器(container)的高度?背景图片的高度}*y百分比，超出的部分隐藏。

5.background-position:-50% -50%;

效果图：

等同于x：-{容器(container)的宽度?背景图片的宽度}*x百分比，超出的部分隐藏。即向左移动了25px;
等同于y：-{容器(container)的高度?背景图片的高度}*y百分比，超出的部分隐藏。即向上移动了92.5px;

6.background-position:-100% -100%;

效果图：

等同于x：-{容器(container)的宽度?背景图片的宽度}*x百分比，超出的部分隐藏。即向左移动了50px;
等同于y：-{容器(container)的高度?背景图片的高度}*y百分比，超出的部分隐藏。即向上移动了185px;

版权声明：本文为博主原创文章，未经博主允许不得转载。