CSS中情况background

日期:2021-03-12 类型:科技新闻 

关键词:在线小程序开发,微信小程序怎么做店铺,小程序logo设计,小程序平台,小程序码生成

下面是我要用到的1个情况图:


编码以下:

拷贝编码
编码以下:

<!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="gb2312">
<head>
<style type="text/css" >
<!--
.style1,.style2,.style3{
float:left;
width:162px;
height:162px;
background:#CCCCCC url(/jiaocheng/UploadFiles/200804/2008041122582457.gif) 0 0 no-repeat;
border:1px dotted #999999;
color:red;
margin-right:10px;
}
.style2{
background-position:⑸0px ⑸0px;
}
.style3{
background-position:100px 100px;
}
.blue{
color:blue;
}
-->
</style>
</head>
<body>
<div class="style1">
x:0,<span class="blue">y:0</span>
</div>
<div class="style2">
x:⑸0px,<span class="blue">y:⑸0px</span>
</div>
<div class="style3">
x:100px,<span class="blue">y:100px</span>
</div>
</body>
</body>
</html>

HTML页中是162*162的灰色情况DIV块并添加3种不一样部位的情况照片,
  在访问器中看到的实际效果:



  从上图能够看到:当为background-position:0 0;时照片的左上角与DIV的左上角是重叠的,当大家精准定位于background-position:⑸0px ⑸0px;时发现照片向左、上挪动了,也就以DIV的左上角为管理中心,图向左挪动了50PX,向上也挪动了50PX.第3个示例选用的全是恰逢,能够解解释为图向右、向下挪动的实际效果.这个应当是好了解的.
  总结1下便是以上全是以DIV的0,0点为参照点照片挪动,假如把DIV区解释为1个座标轴图,向左,上都为负,向右,下为恰逢.

  好象说这么多你也记不住,那我就告知你,你应当记牢甚么吧!

  在实践活动中大部分状况是了解1个图的部位要如上图中那个黄色的点,大家应当在实际效果图上量出它的长度得出两个值全是150PX,那大家界定图的部位就要写background-position:⑴50px ⑴50px;这样就界定好了,在图上的量法就看下图(这张图非常于你用的实际效果图或称设计方案图),记牢这张图坚信你1定能把握情况图负值的方式了。