天天看点

怎样设置背景图片位置

作者:早起的虫子-T

1背景图片

1-1属性名

backgroud-position (bgp)

1-2属性值

background-position:水平方向位置 垂直方向位置;

怎样设置背景图片位置

浏览器显示如下图:

怎样设置背景图片位置

2 练习,看看每种情况的显示。

2-1 默认显示方式,默认方式,

下图为类选择器内容和浏览器显示

怎样设置背景图片位置

body标签内容

怎样设置背景图片位置

一种是默认显示,一种是原点

2-2 位置调整,右边,下角;

下图为类选择器内容和浏览器显示

怎样设置背景图片位置

body标签内容

怎样设置背景图片位置

2-3水平居中,垂直居中 和连写;

下图为类选择器内容和浏览器显示

怎样设置背景图片位置

body标签内容

怎样设置背景图片位置

2-4 像素调节位置

(xs1)从左向右50像素,从上到下100像素;

(xs2)数字为负数时候,是向左,或者向右移动。背景色和背景图只显示在盒子里面。

下图为类选择器内容和浏览器显示

怎样设置背景图片位置

body标签内容

怎样设置背景图片位置

所有代码在此位置

https://app.yinxiang.com/fx/f6ce09fb-569b-4af3-828f-b1a55899f989

(仅为个人自学的一点点思考,如有错漏,欢迎留言指正)

继续阅读