`background-clip`

设置元素的背景(背景图片或背景颜色)是否延伸至 border-box 下, padding-box 下, 或者 content-box 下
clip 本身就有 修剪 的意思~

语法

如果元素没有 background-image 或 background-color, 那么这个属性只有在边框有透明部分或者部分透明区域(比如border-style 为 dashed)才能看到效果, 否则边框将会覆盖 background-clip 产生的样式.
关键词属性
- border-box: 默认值. 背景延申至 border 的外沿, 但是在 z 方向上仍在 border 下层.
- padding-box: 背景延申至 padding 的外沿, 不会绘制在边框下面.
- content-box: 背景被裁剪至 content 内容区
- text: 背景被裁减成文字的形状
看一段示例
- ```
<div class="box box9">你好<br>世界9</div>
<div class="box box10">你好<br>世界10</div>
<div class="box box11">你好<br>世界11</div>
<div class="box box12">你好<br>世界12</div>
```
- ```
.box {width: 200px;height: 200px;background-image: url(../../float/fish.png);/* background-repeat: no-repeat; */border: 15px dashed salmon;padding: 1rem;font-size: 2em;text-align: center;color: #fff;
}
.box9 {-webkit-background-clip: border-box;background-clip: border-box;
}
.box10 {-webkit-background-clip: padding-box;background-clip: padding-box;border-color: aquamarine;
}
.box11 {-webkit-background-clip: content-box;background-clip: content-box;border-color: skyblue;
}
.box12 {-webkit-background-clip: text;background-clip: text;color: transparent;font-size: 3em;font-weight: bold;
}
```
- 这四个背景的 background-clip 分别为 content-box, padding-box, content-box 和 text, 可以看到图片的默认根据 background-position: left top; 展示的, 只不过 clip(被裁掉) 了不同的区域.
- CSS background-clip相关推荐
  1. CSS background 之设置图片为背景技巧
    首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 ba ...
  2. html坐标轴背景色,CSS 背景(css background)
    CSS 背景-CSS background 一.Css background背景语法 - TOP CSS背景基础知识CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式 ...
  3. css中clip属性的使用
    css的clip属性经常用不到,使用率很低. 简述clip属性 w3c介绍clip属性: 通过元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了 ...
  4. CSS background（背景图片）详解
    "在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可 ...
  5. CSS 背景-CSS background
    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法 - TOP CSS背景基础知识CSS 背景 ...
  6. Css background背景语法
    一.Css background背景语法 - TOP CSS背景基础知识 CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式. 背景语法: background: b ...
  7. html css设置背景图片,css background之设置图片为背景技巧
    Bac公斤round是什么含义,翻译过来有配景意义.异样在css内中作为css属性一成员同样是有后援含义,何况是设置装备摆设后盾图片.布景色调.布景图片截取等款式. 起首先来看看bac公斤round有 ...
  8. 学习笔记 css background 图片
    学习笔记 css background 图片 <html><head><style>/*body {background: #ccc url(a.png) no-r ...
  9. CSS background 属性
    一.background属性可以设置一个元素的背景样式,当然前提是这个元素有具体的宽高值. 先来一个简单的背景设置: 1 #show-box { 2 width: 800px; 3 height: 5 ...
  10. css中clip:rect用法
    css中有一个属性叫做clip,用于修剪裁剪.配合其属性关键字rect可以实现元素的矩形裁剪效果. top right bottom left 分别指最终裁剪可见区域的上边,右边,下边,左边.而所有的 ...
  最新文章
  热门文章

CSS background-clip

background-clip

语法

CSS background-clip相关推荐

最新文章

热门文章

`background-clip`