自我评价:走在路上的菜鸟,想着CMS|WEB|SEO,做着可以成为牛掰程序seoer的梦!

当前位置:博客 > 前端开发 > HTML|CSS代码 >

background-position背景定位

作者:灰牛站长•发布时间:2021-07-12 10:13:57•浏览

background-position背景定位

  1. background-position属性设置背景图像的起始位置
  2. xpos ypos第一个值是水平位置,第二个值是垂直,左上角是0,单位可以是长度值px,关键字和百分数值
  3. 关键词字成对出现left right top bottom center,如果仅指定一个关键字,其他值将会是'center'
  4. X%  y%第一个值是水平位置,第二个是垂直,左上角是0% 0%,右下角是100% 100%,如果仅指定一个值,其他值将是50%,默认为:0% 0%
  5. 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>
  1. X轴的坐标(坐标方向)Y轴的坐标(垂直方向)X轴越大越往右Y轴越大越往小
  2. 50% 50%=>center center 正中心的位置
  3. background-position:背景定位,规定背景图片的起始坐标点(位置)
  4. 单位:px %(百分比) 方位(top,bottom,left,right,center)
  5. 方位只指明X轴,没有Y轴,默认Y轴为center
  6. 百分比只写X轴50%,Y轴默认也是50%
  7. background-position:left;=>left center
  8. background-position:right;=>right center

相关文章

  • 网页布局设计|三列布局-左右绝对定位-中间适应

    网页布局设计|三列布局-左右绝对定位-中间适应

    基本思路: 左右2列采用绝对定位来布局 中间内容部分采用margin挤压出来 HTML结构 div class="container"div class="left"左侧/divdiv class="right"右侧/divdiv class="main"主体...
    2021-07-21 10.07.20
  • html网页布局|两列布局-左右二侧-绝对定位

    html网页布局|两列布局-左右二侧-绝对定位

    基本思路: 给2列添加一个定位的父集区块,并设置定位属性,一般设置为相对定位 给左右2个区块分别使用绝对定位 父集区块/定位父集必须设置宽度width...
    2021-07-21 10.07.57
  • 定位元素的异同点

    定位元素的异同点

    定位的值 position: absolute绝对定位 position: relative相对定位 position: fixed固定定位 定位的相同点和不同点 ===相同点: 可以 设置top/ bottom/ left/right四个方位值,如...
    2021-07-12 11.07.09
  • 定位之固定定位

    定位之固定定位

    固定定位- position: fixed 脱离文档流; 参照物是浏览器的可视窗口;任何元素都可以设置固定定位; 可设置top/ bot tom/left/ right四个方位 可通过z-index改变层级 !...
    2021-07-12 11.07.38
  • 定位之相对定位

    定位之相对定位

    相对定位特点 1.不会离文档流 占位 所有后面的元素不会往前跑 2.可以设置上下左右四个方位 如果同的设置了top和bottom值只有top起作用 如果同时设置了...
    2021-07-12 11.07.13

手机端