为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第8天+CSS3背景 background-origin、background-clip

标签:
CSS3

第一模块:十天精通CSS3 5-1、5-2 大漠
第二模块:

设置元素背景图片的原始起始位置

语法:

background-origin : border-box | padding-box | content-box;

参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。

效果如下:

需要注意的是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。

background-clip:

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

语法:

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

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

效果如下图所示:

第三模块:

https://img1.sycdn.imooc.com/631f24db00016e5318140900.jpg

https://img4.sycdn.imooc.com/631f254300015a1b18290896.jpg


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消