CSS3之背景background-clip


   作者蓝石榴    由lan16转载自蓝石榴    更新于2017-07-31 14:41    已被浏览86次

1.使用方法:
  background-clip用来将背景图片做适当的裁剪以适应实际需要。 语法:
  background-clip:border-box|padding-box|content-box|no-clip;
  参数分别表示从边框(border-box),或内填充(padding-box),或者内容区域向外裁剪背景(content-box)。no-clip表示不裁切,和参数border-box显示同样的效果。backgroud-clip默认值为border-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;
    background-clip: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:border-box;
    background-clip: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:border-box;
    background-clip:content-box;
  }
  .content-div{
    width:150px;
    height:150px;
    border:1px solid #000;
  }
  效果如下

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