章节
问答
课签
笔记
评论
占位
占位

CSS3背景 background-clip

用来将背景图片做适当的裁剪以适应实际需要。

语法：

background-clip ： border-box | padding-box | content-box | no-clip

参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

效果如下图所示：

任务

在右侧代码编辑器窗口的第15行，输入正确内容使背景从“内填充区域”开始裁切。

?不会了怎么办

padding是否拼写正确？

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后，能更快找到我哦～

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后，及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

background-clip

已采纳回答 / 慕码人0004322
border是设置边框的，padding是设置内补白的，假如你设置了一个按钮，但是又不想设置它的宽和高，那么你怎么把它撑起来呢？这时候设置一个padding值就能达到你想要的效果了，但是你设置一个border值完全没什么用啊，按钮还是扁的，两个设置的地方都不一样
2 回答 1360 浏览
2018-12-01

背景图不裁切时效果不是应该和padding-box一样吗？怎么和border-box一样了？

已采纳回答 / 爱上慕婉清6262634
根据我的测试，background-clip这个属性是受到background-origin的限制。即background-clip默认值等同于background-origin设置的值。1，设置background-origin:border-box;则background-clip默认是border-box,可选padding-box和content-box。2，设置background-origin:padding-box;则background-clip默认是padding-box,可选conte...
4 回答 2353 浏览
2019-11-09

我想问下， background-clip ： border-box这个是不是等于没裁剪？

已采纳回答 / Brevity0209
是的，和no-clip具有相同的效果， 默认情况下，时不裁剪的。
1 回答 1073 浏览
2018-10-09

不太明白呢

最新回答 / 慕容1529948
origin content是把图片填充在content框里 clip padding表示从内边框开始裁剪
3 回答 700 浏览
2019-08-06

一脸懵逼的请教

已采纳回答 / 小黍
|这个符号是或的意思，也就是这些里面选一个就行啦
3 回答 907 浏览
2017-03-11

关于背景初始位置以及剪切

最新回答 / 码伍
不用先对着整个元素进行定位的。背景定位用background-origin属性，这个属性有三个参数，别是padding-box(默认值)、border-box、content-box这三个取值！给你一个连接，去看看，在这里写的很清楚http://www.lvyestudy.com/css3/css3_8.3.aspx
1 回答 576 浏览
2016-11-22

background-clip属性的值不能被覆盖吗？还是优先级问题？还是其他问题？

最新回答 / 慕仙8270835
....
1 回答 1051 浏览
2016-10-27

border-box | no-clip有什么区别？

+ 我来回答 回答最高可+2积分
4 回答 2446 浏览
2017-09-06

剪裁的问题~

已采纳回答 / 溯兮流光
有效果啊，你是怎么弄得
1 回答 875 浏览
2016-08-23

这节有点不懂，裁剪后我没看到什么地方有变化

已采纳回答 / 胡震撼
    background-origin:padding-box;    background-clip:content-box;    设置成这样你在试试看
1 回答 1218 浏览
2018-10-09

padding- 算内填充区？

+ 我来回答 回答最高可+2积分
4 回答 1089 浏览
2022-09-08

background-clip会改变background的所有属性吧？

最新回答 / 零下的夏天
没改变backgrond的所有属性啊，背景颜色也算是背景吧，上面的代码是从padding-box往外裁剪的，所以border-box那快的背景也被裁剪了，不知道我理解的对不对
2 回答 1254 浏览
2016-08-23

居然是要在padding时候开始裁剪，内填充区域也是在内容显示区域里面

+ 我来回答 回答最高可+2积分
5 回答 626 浏览
2022-07-24

background-clip ： border-box | padding-box | content-box | no-clip参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。

+ 我来回答 回答最高可+2积分
1 回答 615 浏览
2022-04-10

background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

+ 我来回答 回答最高可+2积分
2 回答 602 浏览
2022-07-03
全部 我要发布
最热 最新
只看我的

推荐课程

推荐路线系统化学习，打造阶梯学习模式

相关课程

手记推荐

更多

本次提问将花费2个积分

你的积分不足，无法发表

为什么扣积分？
确认 取消

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分？
确认 取消

账号登录 验证码登录

遇到问题
忘记密码

登录即同意慕课网《隐私政策》
代码语言