老师还是感觉不出background-orign和background-clip有什么区别

老师还是感觉不出background-orign和background-clip有什么区别

老师还是感觉不出background-orign和background-clip有什么区别

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好, background-origin和background-clip看上去实现的效果差不多,但是他们两个的原理是不同的。background-origin定义的是背景位置(background-position)的起始点;而background-clip是对背景(图片和背景色)的切割。示例:

  1. 设置统一的样式

    http://img1.sycdn.imooc.com//climg/5cac2bbf00011ab410280393.jpg

  2. 设置background-origin属性

    http://img1.sycdn.imooc.com//climg/5cac2bec0001f42105030292.jpg

    效果图:

    http://img1.sycdn.imooc.com//climg/5cac2c1000018d2510730346.jpg

  3. background-origin结合background-position使用

    http://img1.sycdn.imooc.com//climg/5cac2c6f0001327504510346.jpg

    效果图:

    http://img1.sycdn.imooc.com//climg/5cac2c8400017eff10810356.jpg

  4. 设置background-clip 

    http://img1.sycdn.imooc.com//climg/5cac2cdb0001baca04950288.jpg

    效果图:

    http://img1.sycdn.imooc.com//climg/5cac2d010001314e10640347.jpg

  5. background-clip 结合background-position使用

    http://img1.sycdn.imooc.com//climg/5cac2d5d000149a404600356.jpg

    效果图

    http://img1.sycdn.imooc.com//climg/5cac2d530001d0b210650352.jpg

同学可以结合示例,自己下去练习一下,加深理解。

若还有疑惑可以继续在问答区提问,我们会继续为你解答的

如果帮助到了你 欢迎采纳

祝学习愉快~~~


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师