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

2022/9/14 4:16:14

本文主要是介绍【九月打卡】第8天+CSS3背景 background-origin、background-clip,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

第一模块:十天精通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




这篇关于【九月打卡】第8天+CSS3背景 background-origin、background-clip的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程