zoukankan      html  css  js  c++  java
  • css3,background-clip/background-origin的使用场景,通俗讲解

    先不说background-clip/background-origin的用法,我们先来聊聊css背景方面的知识。

    复制代码
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>css背景知识点</title>
     6     <style>
     7         body,p{
     8             margin:0;
     9             padding:0;
    10         }
    11         p{
    12             100px;
    13             height:100px;
    14             background-color:pink;
    15         }
    16     </style>
    17 </head>
    18 <body>
    19     <p></p>
    20 </body>
    21 </html>
    复制代码

    现在p的宽和高各是100px,颜色的范围也是100*100的对吧,如果给它加上padding-top:10px呢?那么现在的高是110,颜色的背景是100*110对不?

    因为背景是包括padding的,这对理解为什么需要使用background-clip和background-origin至关重要。

    透露一下,大部分情况会使用在有用精灵图的背景上。

    复制代码
     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>css背景知识点</title>
     6     <style>
     7         body,p{
     8             margin:0;
     9             padding:0;
    10         }
    11         .box{
    12             100%;
    13             height:45px;
    14             line-height:45px;
    15             background-color:#ccc;
    16             
    17         }
    18         p{
    19             42px;
    20             height:40px;
    21             margin:0 auto;
    22             background-size:50px 50px;
    23             background:url("focus-icon.png") no-repeat 0 -50px;
    24         }
    25     </style>
    26 </head>
    27 <body>
    28     <div class="box">
    29         <p></p>
    30     </div>
    31 </body>
    32 </html>
    复制代码

    效果图

    我现在想让中间的爱心Y方向向下移动一点,我给p标签加上padding-top:10px;

    效果如下

    它并没有向下移动而是高度多出了一些,如果你理解了我上面说的,那你应该可以理解这个。

    之所以会这样是因为背景包括了padding。但是我们现在并不想这样,那就可以用css3的属性background-clip,这是一个裁剪属性

    加上background-clip:content-box;就可以了,什么意思呢?就是说从内容开始计算背景,那么就不会包括padding了。

    应该懂了吧?

    那么background-origin什么意思呢?

    不知道你们有没有方向一个现象,就是我们使用精灵图的时候默认图片会显示在左上角。

    如果你想改变它的位置就可以使用background-oringin

    如果想从中间开始,那就设置成background-oringin:content-box;

    当然还有其他的一些属性,你们可以去网上查一下。

  • 相关阅读:
    JQuery封装的ajax
    DOM节点操作
    ES6中的let和const
    CSS cursor 属性
    ui-router 视图嵌套时指定二级视图显示默认页面
    数组去重的几种方法
    basic_consume() got multiple values for keyword argument 'queue'
    perl改造成bash---结果写入xml
    springmvc 启动报 java.lang.NoSuchMethodError: org.springframework.core.GenericTypeResolver.resolveTypeArguments(Ljava/lang/Class;Ljava/lang/Class;)[Ljava/lang/Class;
    web项目部署名和项目名不一致
  • 原文地址:https://www.cnblogs.com/zhangxiaolei521/p/5217949.html
Copyright © 2011-2022 走看看