zoukankan      html  css  js  c++  java
  • CSS3中background-origin和background-clip的区别

    • background-origin:to determine how the background-position of a background in a certain box is calculated.
    • background-clip:to determine whether the backgrounds extends into the border or not.

    用通俗一点的话说,其实就是:

    • background-origin:用来确定背景从哪里开始描绘
    • background-clip:用来确定背景从哪里开始显示(其实从origin和clip的字面意思也可以感受出来,clip是剪切嘛),背景可以延伸到哪。

    它们的取值都有三个:border-box | padding-box | content-box, 其中background-origin的默认值是padding-box,background-clip的默认值是border-box。

    以下的例子应该能更直白地表现它们的区别:

    先写一个

    <div class='box'>
    </div>

    然后添加简单的样式:

    .box{
      width:450px;
      height:300px;
      background-image: url('http://a4.att.hudong.com/40/03/16300001203327135349034613246.jpg');
      background-repeat:no-repeat;
      background-size: 400px 240px;
      border: 30px dashed #458B74;
      background-color:#B9D3EE;
      padding:20px;
    }

    显示的效果如下:

    QQ截图20140326142619_thumb[1]

    这里其实也可以看出background-origin和background-clip的默认取值分别为padding-box和border-box。

    当添加以下几组代码时,可看到不同的效果:

    A-------------------------------------------------------------------------------------------

    .box{
        background-origin:border-box;
        background-clip:border-box;
    }

    QQ截图20140326142528_thumb[2]

    这里可以看到,背景图片从border就开始绘制,显示也从border开始,因此效果如上。

    B--------------------------------------------------------------------------------------------

    .box{
        background-origin:border-box;
        background-clip:padding-box;
    }

    QQ截图20140326142853_thumb[2]

    绘制还是从border开始,但是显示是从padding开始,因此显示如上。

    c--------------------------------------------------------------------------------------------

    .box{
        background-origin:content-box;
        background-clip:border-box;
    }

    image_thumb[1]

    绘制从content开始,显示从border开始。

    D--------------------------------------------------------------------------------------------

    当然如果绘制从border开始,显示从content开始,效果就是下面的效果了。

    .box{
        background-origin:border-box;
        background-clip:content-box;
    }

    ]0%{499T%Q$IPNMB]SG8UMJ_thumb[1]

  • 相关阅读:
    FusionMap 检测融合基因
    嵌合体序列
    seqtk 的安装和使用
    cutadapt 的安装与使用
    C语言简单选择排序
    C语言冒泡排序
    Java实现的各种排序算法(包括冒泡,快排等)
    C++实现顺序计算输入表达式的值
    java多线程有几种实现方法?线程之间如何同步
    java中==与equal()方法的区别
  • 原文地址:https://www.cnblogs.com/yuanting0505/p/3625603.html
Copyright © 2011-2022 走看看