详解css中background

日期:2021-01-20 类型:科技新闻 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

background-clip特性的通俗化功效便是特定元素情况所属的地区,有4种赋值

1、border-box

border-box是默认设置值,表明元素的情况从border地区(包含border)之内刚开始保存情况。

简易编码以下:

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat ⑸px;padding:5px;border:5px dotted #000;<br>       background-clip:border-box;}
        </style>
   </head>
   <body>
       <div class="box"></div>
   </body>
</html> 

实际效果以下:

  

从上图大家能够看出,元素情况默认设置是存在于边框及之内的地区,可是不知道道为何加情况照片,不可以所有遮盖;而情况色调则没没这个难题。

2、padding-box

padding-box表明元素的情况从padding地区(包含padding)之内刚开始保存。

简易编码以下:
 

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat ⑸px;padding:5px;border:5px dotted #000;<br>            background-clip:padding-box;}
        </style>
   </head>
   <body>
       <div class="box"></div>
   </body>
</html>

实际效果以下:

从上图大家能够看出情况照片存在于padding及之内地区。

3、content-box

content-box表明元素的情况从內容地区之内刚开始保存。

简易编码以下:

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat ⑸px;padding:5px;border:5px dotted #000;<br>            background-clip:content-box;}
        </style>
   </head>
   <body>
       <div class="box"></div>
   </body>
</html>

实际效果以下:

从上图大家能够看出情况照片存在于內容地区之内。

4、text

content-box表明元素的情况保存在市场前景內容中(文本),和其样子尺寸同样,现阶段仅适用chrome访问器

简易编码以下:

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:red;padding:5px;border:5px dotted #000;<br>             font-size:100px;font-weight;bold;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
        </style>
   </head>
   <body>
       <div class="box">你 好 你 好</div>
   </body>
</html>

 实际效果以下:

表明:现阶段值为text时,适配性极差,仅了解便可。

总结

以上所述是网编给大伙儿详细介绍的详解css中background-clip特性的功效,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:调剂CSS种类的次序更改连接滚翻 返回下一篇:没有了