css3之background-clip

最新推荐文章于 2022-07-27 16:06:28 发布

shidaping

最新推荐文章于 2022-07-27 16:06:28 发布

阅读量583

点赞数

分类专栏： web前端文章标签： css3 html 前端

本文链接：https://blog.csdn.net/shidaping/article/details/50222727

版权

web前端专栏收录该内容

49 篇文章 0 订阅

订阅专栏

background-clip是css3中一个很有用，但容易被忽视的一个属性。

定义

background-clip 属性规定背景的绘制区域。讲得通俗一点，此属性规定背景是不能存在于border和padding中。

可选项

border-box，背景被裁剪到边框盒。也就是说border上会有背景（背景会延伸到border）。
padding-box,背景被裁剪到内边距框。也就是说padding上会有背景（背景会延伸到padding）。
content-box，背景被裁剪到内容框。也就是说只有content上会有背景，border和padding上都不会有背景。

例子

下面我们来看一个例子。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style>
  div {
    background: url('http://www.4908.cn/upload/2015-11/151110114758441.jpg');
    background-size: cover;
    border: 10px solid rgba(0, 0, 0, 0.5);
    width: 200px;
    height: 200px;
    float: left;
    display: inline-block;
    margin-left: 50px;
    padding: 50px;
    box-sizing: border-box;
  }
  
  div span {
    border: 3px solid red;
    overflow: hidden;
  }
  
  .div1 {
    -webkit-background-clip: border-box;
  }
  
  .div2 {
    -webkit-background-clip: padding-box;
  }
  
  .div3 {
    -webkit-background-clip: content-box;
  }
  </style>
</head>

<body>
  <div class='div1'>
    <span>文本</span>
  </div>
  <div class='div2'>
    <span>文本</span>
  </div>
  <div class='div3'>
    <span>主本</span>
  </div>
</body>

</html>

实际效果为：

第一个div边框上也有背景图边，第二个div只在padding上，第三个只在content上。

shidaping

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3之background-clip

background-clip是css3中一个很有用，但容易被忽视的一个属性。定义background-clip 属性规定背景的绘制区域。讲得通俗一点，此属性规定背景是不能存在于border和padding中。可选项border-box，背景被裁剪到边框盒。也就是说border上会有背景（背景会延伸到border）。padding-box,背景被裁剪到内边距框。也就是说
复制链接

扫一扫

专栏目录