CSS background

日期:2020-12-13 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

background-position的表明:
设定或查找目标的情况图象部位。务必先特定 background-image 特性。该特性精准定位不会受到目标的补钉特性( padding )设定危害。
默认设置值为: 0% 0% 。此时情况照片将被精准定位于目标不包含补钉( padding )的內容地区的左上角。
假如只特定了1个值,该值将用于横座标。纵座标将默认设置为 50% 。假如特定了两个值,第2个值将用于纵座标。
假如设定值为 right center,由于 right 做为横座标值可能遮盖 center 值,因此情况照片将被居右精准定位。
对应的脚本制作特点为 backgroundPosition 。

英语的语法:
background-position : length || length
background-position : position || position

赋值:
length : 百分数 | 由浮点数据和企业标志符构成的长度值。
position : top | center | bottom | left | center | right

background-position -- 界定情况照片的部位

赋值:
[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ] ]
* 水平
left: 左
center: 中
right: 右
* 竖直
top: 上
center: 中
bottom: 下
* 竖直与水平的组成
x-% y-%
x-pos y-pos

原始值: 0% 0%
承继性: 否
可用于: 全部元素
background:情况.position:部位.

关键解读的地区:

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF⑻">
<head>
<title>情况照片的精准定位background-position的难题</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body {
text-align:center;
background:#000;
}
#container{
width:1000px;
margin:0 auto;
background:#fff url(images/bg.jpg) no-repeat left top;
height:500px;
}
-->
</style>
</head>
<body>
<div id="container"> </div>
</body>
</html>

照片:
 
1.background-position:left top;(见图1).
情况照片的左上角和器皿(container)的左上角对齐,超过的一部分掩藏。
等同于于 background-position:0,0;
也等同于于background-position:0%,0%;

2.background-position:right bottom;(见图2)。
情况照片的右下角和器皿(container)的右下角对齐,超过的一部分掩藏。
等同于于background-positon:100%,100%;
也等同于于background-positon:器皿(container)的宽度-情况照片的宽度,器皿(container)的高宽比-情况照片的高宽比

3.background-position:500px 15px;(见图3)。
情况照片坦然器(container)左上角的地区向右移500px,向下移15px,超过的一部分掩藏。

4.background-position:⑸00px ⑴5px;(见图4)。
情况照片坦然器(container)左上角的地区向左移500px,向上移15px,超过的一部分掩藏。

5.background-position:50% 50%;(见图5)。
等同于于left:{器皿(container)的宽度—情况照片的宽度}*left百分比,超过的一部分掩藏。
等同于于right:{器皿(container)的高宽比—情况照片的高宽比}*right百分比,超过的一部分掩藏。
比如:background-position:50% 50%;便是background-position:(1000⑵000)*50%px,(500⑶0)*50%px;即background-position:⑸00px,235px;也便是情况照片坦然器(container)的左上角向左移500px,向下移235px;

6.background-position:⑸0% ⑸0%;(见图6)。
(这类状况情况照片应当用bg2.jpg才可以看出实际效果,bg.jpg的高宽比很小实际效果不显著)
等同于于left:-{{器皿(container)的宽度—情况照片的宽度}*left百分比(百分比都取恰逢)},超过的一部分掩藏。
等同于于right:-{{器皿(container)的高宽比—情况照片的高宽比}*right百分比(百分比都取恰逢)},超过的一部分掩藏。
比如:background-position:⑸0% ⑸0%;便是background-position:-{(1000⑸00)*50%}px,-{(500⑶60)*50%}px;即background- position:⑵50px,⑺0px;也便是情况照片坦然器(container)的左上角向左移250px,向上移70px;下面是在网上的其它文章内容。
background-position -- 界定情况照片的部位
赋值: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
水平
left: 左
center: 中
right: 右
竖直
top: 上
center: 中
bottom: 下
竖直与水平的组成
x-% y-%
x-pos y-pos
inherit: 承继
原始值: 0% 0%
承继性: 否
可用于: 全部元素
background:情况.position:部位.
注:background-position特性是CSS2.1提出的.IE6,Firefox1.5,Opera9适用此特性

示例
body {
background-image:url('list-orange.png');
background-repeat:no-repeat;
}
p {
background-image:url('list-orange.png');
background-position:right bottom ;
background-repeat:no-repeat;
}
div {
background-image:url('list-orange.png');
background-position:50% 20% ;
background-repeat:no-repeat;
}
显示屏左上角显示信息1个橙色点.p段落的左下角显示信息1个橙色点.div正中间偏上显示信息1个橙色点.

表明
background-position特性是根据平面上的x与y座标精准定位的,因此一般取两个值.
比如:
<percentage> <percentage>
左上角为0%, 0%. 右下角为100%, 100%.比如58%,56%便是从左上角算起,右移58%,下移56%.
<length> <length>
6cm 8cm,从左上角算起,右移6cm,下移8cm.
更多內容,请看脚本制作之家近期升级的文章内容。关键详细介绍css background-position