background不常用的属性

使用background属性的时候一般只使用自己熟悉的属性,或者其实大多数时候默认属性就能符合需求。遇到不熟悉的需求可能挨个属性试一下就可以了。但是最好的方案还是了解清楚。其实前端最花时间的就是样式处理了。

1. background-clip

background-clip是背景颜色或者背景图片的可见的填充范围。 注意,如果想要背景图片对该属性起作用,那么不能直接使用background: url(), 而需要使用background-image: url()

  • background-clip: border-box (默认值)
css 复制代码
/*在border的范围也会背景图片填充*/
background: url(https://pic4.9pic.cn/00/23/beijing-jihe1-bizhi-jihebeijing_236624_detail.jpg);
padding:40px;
border:20px dashed yellow;
background-clip: border-box;
  • background-clip: padding-box
  • background-clip: content-box;

2. background-origin

该属性表示背景从哪个范围开始渲染。 下面的例子在background-clip: content-box的前提下进行渲染。

  • background-origin: border-box
  • background-origin: padding-box
  • background-origin: content-box
相关推荐
张风捷特烈1 小时前
匠心千游 | 纯 AI 打造休闲小游戏
前端·微信小程序·游戏开发
longze_75 小时前
Vue中:deep()和 ::v-deep选择器的区别
前端·javascript·vue.js
太阳伞下的阿呆8 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny8 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴9 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔9 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔10 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔10 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_61410 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止11 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix