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

  • 相关阅读:
    接口和抽象的区别
    接口
    jquery Ajax提交表单数据
    SQL 检查 是否存在 表 临时表
    ASP.NET MVC 设置Area中 Controller 的方法 默认启动页
    json 序列化为数组
    C# Lamda中类似于SQL 中的 In 功能
    各种webservice调用地址
    ASP.NET获取客户端IP地址
    C#反射机制 Type类型
  • 原文地址:https://www.cnblogs.com/asassa/p/9222142.html
Copyright © 2011-2022 走看看