zoukankan      html  css  js  c++  java
  • background-clip背景切割

    一、背景切割

    1.使用场景:当插入图片不能正常显示,或需要调整时

    2 . 属性:background-clip:border-box/   padding-box/  content-box

    3. 作用:为将背景图片做适当的裁剪,以适应需要。

    4. 默认格式 background-clip :border-box,border的区域也有背景图,但是背景图图片是从border-top和border-left的位置开始平铺的,所以当背景图片no-repeat的时候,border-top和border-left的背景是背景色不是背景图,只有当背景repeat的时候,border-top和border-left才是背景图,并且border-top和border-left的背景是从图片的下边和右边开始平铺的。

    默认背景图:

    当背景使用no-repeat时:

     

    图片显示是从边框盒的右边和下边显示的,上边和左边是没有内容的。

    当使用repeat平铺的时候:

    背景的内容已经填充上去,但不是我们想要的效果,上边和左边是不是平涂内容。

    这个时候我们就要用到背景原点

    二、 背景原点

    1. 属性:background-orgin:border-box /padding-box  /content -box

    2. 作用:决定图片的原始起始位置

    3.background-orgin:border-box和background-clip:border-box,一般一起使用,一个控制背景的显示尺寸,一个控制背景的位置

  • 相关阅读:
    NOIP 模拟 序列操作
    LUOGU 1525 关押罪犯
    HDU2473 Junk-Mail Filter
    BZOJ 2096 Pilots
    luogu 3939 数颜色
    NOIP模拟 赌博游戏
    Unity3D
    HTML5
    Cocos2d-x——支持多触点
    Cocos2d-x——Cocos2d-x 屏幕适配总结
  • 原文地址:https://www.cnblogs.com/asassa/p/9222142.html
Copyright © 2011-2022 走看看