CSS3之背景background-origin


   作者蓝石榴    由lan16转载自蓝石榴    更新于2017-07-31 12:00    已被浏览89次

1.使用方法:
  background-origin用来设置元素背景图片的原始起始位置。 语法:
  background-origin:border-box|padding-box|content-box;
  参数分别表示背景图片是从边框(border-box),还是内边距(padding-box默认值),或者是内容区域(content-box)开始显示。

2.1、border-box代码示例:
  .wrap{
    width:250px;
    height:250px;
    border:10px dashed #999;
    text-align:center;
    padding:30px;
    background:url(/images/lan16_icon.png);
    background-repeat:no-repeat;
    background-origin:border-box;
  }
  .content-div{
    width:150px;
    height:150px;
    border:1px solid #000;
  }
  效果如下

2.2、padding-box代码示例:
  .wrap{
    width:250px;
    height:250px;
    border:10px dashed #999;
    text-align:center;
    padding:30px;
    background:url(/images/lan16_icon.png);
    background-repeat:no-repeat;
    background-origin:padding-box;
  }
  .content-div{
    width:150px;
    height:150px;
    border:1px solid #000;
  }
  效果如下

2.3、content-box代码示例:
  .wrap{
    width:250px;
    height:250px;
    border:10px dashed #999;
    text-align:center;
    padding:30px;
    background:url(/images/lan16_icon.png);
    background-repeat:no-repeat;
    background-origin:content-box;
  }
  .content-div{
    width:150px;
    height:150px;
    border:1px solid #000;
  }
  效果如下

豫ICP备13022176号-2   鄂公网安备 42010602000416号   Copyright © 2013 - 2020 蓝石榴. All Rights Reserved  联系我 联系我 蓝石榴技术社区