• 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,一般一起使用,一个控制背景的显示尺寸,一个控制背景的位置

  • 相关阅读:
    C# 中的栈和堆
    C# 中的基本数值类型
    多个 .NET 框架
    简单介绍托管执行和 CLI
    C# 控制台输入和输出
    在 C# 中使用变量
    C# 语法基础
    LeetCode 1482. 制作 m 束花所需的最少天数
    C# 基础(更新中)
    圆形靶内的最大飞镖数量
  • 原文地址:https://www.cnblogs.com/asassa/p/9222142.html
Copyright © 2020-2023  润新知