欢迎访问我的的博客,网站主要用于记录学习WEB语言|CMS建站|SEO优化及日常工作常见问题总结!
您的位置:主页 > HTML/CSS >

background-position背景定位

background-position背景定位

  • background-position属性设置背景图像的起始位置
  • xpos ypos第一个值是水平位置,第二个值是垂直,左上角是0,单位可以是长度值px,关键字和百分数值
  • 关键词字成对出现left right top bottom center,如果仅指定一个关键字,其他值将会是'center'
  • X%  y%第一个值是水平位置,第二个是垂直,左上角是0% 0%,右下角是100% 100%,如果仅指定一个值,其他值将是50%,默认为:0% 0%
  • inherit指定background-position属性设置应该从父元素继承

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.logo{
width: 400px;
height: 400px;
/* background-color: #f90;
background:url(http://www.zhufengpeixun.cn/skin/20142/img/logo1.png);
background-repeat: no-repeat; */
background:#f90 url(http://www.zhufengpeixun.cn/skin/20142/img/logo1.png) no-repeat;
background-position:right;
}
</style>
</head>
<body>
<div class="logo"></div>
</body>
</html>
  • X轴的坐标(坐标方向)Y轴的坐标(垂直方向)X轴越大越往右Y轴越大越往小
  • 50% 50%=>center center 正中心的位置
  • background-position:背景定位,规定背景图片的起始坐标点(位置)
  • 单位:px %(百分比) 方位(top,bottom,left,right,center)
  • 方位只指明X轴,没有Y轴,默认Y轴为center
  • 百分比只写X轴50%,Y轴默认也是50%
  • background-position:left;=>left center
  • background-position:right;=>right center
上一篇标题:background-attachment背景关联
下一篇标题:background-repat背景重复

相关文章

 

文章-background-position背景定位发布日期:2021-04-01 17:01作者:admin
如需转载,请注明文章出处和来源网址:https://www.dhnblog.com/htmlcss/240.html