css3的background-clip 和 background-origin

最新推荐文章于 2022-03-17 20:53:24 发布
最新推荐文章于 2022-03-17 20:53:24 发布
阅读量154 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/default_coder/article/details/79667538
版权

css2的时候背景图会扩充至padding区域，会显得不好控制。

于是css3引入了background-clip  和  background-origin 对背景图可以更加精确的控制。

两个属性的参数都是 border-box  padding-box  content-box


background-clip会根据设置的参数裁剪掉多余的部分 ----- 不完整显示背景图

background-origin会根据设置的参数将背景图缩放至设定的显示范围内-----完整显示背景图

default_coder
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 background-clip背景裁剪、CSS3 background-origin背景图片起点
m0_71814235的博客
07-27 396
CSS3 background-clip背景裁剪、CSS3 background-origin背景图片起点
CSS3中background-clip和background-origin的区别示例介绍
09-25
本文为大家介绍下CSS3中background-clip和background-origin的区别，感兴趣的朋友可以参考下
background-clip使用
丫丫的博客
06-23 936
今天在前端群中有问到一个问题，做了一个按钮给了背景色和边框颜色是一致的，可是显示出来的边框颜色却要比背景色深很多，百思不得姐，之后在一篇文章中看到了，用这个background-clip就好使，在此记录下，留个印象。 background-clip是一个CSS3属性，W3C中说明的background-clip中是这么说的：background-clip 属性规定背景的绘制区域。默认值是bord
react native background 渐变_2021年值得推荐的3个React动画库及思考
weixin_39564831的博客
01-12 167
1. React Spring这是React官网提到的三个动效库之一，还有两个是react-transition-group和react-motion，后面我们会讲到，目前有19.1K的Star，和React-motion部分伯仲。 这是一个基于弹簧物理学的动画库，基本上能满足大多数与UI相关的动画需求，继承了animated强大的插值和性能，以及react-motion的易用性。同时，它提供了H...
Qt Style Sheet实践（一）：按钮及关联菜单
chenyijun的专栏
03-28 1400
http://www.cnblogs.com/csuftzzk/p/qss_button_menu.html导读 正如web前端开发中CSS（CascadeStyleSheet）的作用一样，Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。这样，美工设计人员和逻辑实现者可以各司其职而不受干扰。更重要的是，由于界面和逻辑处理是分离的，低耦合性使得代码重构的工作量可以减少到最...
css3 background-clip和background-origin
小漠007的专栏
05-06 567
浏览器支持： 这里的支持是指:允许开发人员修改该属性， background-clip和和background-origin 属性特征从css2规范开始就已经存在(IE6+支持特性，但是不支持开发者修改，IE8开始支持) css2规范:  background-clip为padding-box即从内补白开始 css2.1~css3规范:background-clip为border
CSS背景属性,background-origin和background-clip
w875471321的博客
10-16 5133
一.background-origin background-origin用来控制背景图片的位置 他有两个值: padding-box(默认):指定背景图片由padding开始展示 content-box:指定背景图片在内容区域开始展示 border-box:指定背景图片在边框区域开始展示 1.background-origin:padding-box(...
CSS background-clip
broken_promise的博客
03-17 2420
background-clip 设置元素的背景(背景图片或背景颜色)是否延伸至 border-box 下, padding-box 下, 或者 content-box 下 clip 本身就有 修剪 的意思~ 语法 如果元素没有 background-image 或 background-color, 那么这个属性只有在边框有透明部分或者部分透明区域(比如border-style 为 dashed)才能看到效果, 否则边框将会覆盖 background-clip 产生的样式. 关键词属性 borde
CSS3 background-orgin与 background-clip的区别
Sapling
09-24 329
最大的区别为：background-orgin是指图片从坐标系的那个位置展开。而background-clip 是指图片覆盖的区域，以外的区域将被剪掉看不到。 1. background-orgin origin 有起源的含义：在CSS3中background-position指从坐标系的那个位置开始展开，一般图片展开的时候是从内边距开始展开的，但是在有时候我们想让从照片从外边框开始展开就可以...
CSS 高级属性之 background-size、background-origin、background-clip 详解
青颜的天空的博客
03-08 751
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
css --- background 二（background-clip、background-origin）
fupo
04-05 476
碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！ 1. background-clip1.1 border-box （默认值）1.2 padding-box1.3 context-box1.4 三种情况对比1.5 background-clip:text2 . background-origin2.1 border-box2.2 padding-box（默认值）2.3 content-box2.4 三种情况对比3. background-clip与background-origin 1..
CSS3教程：background-clip和background-origin
01-19
background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。 background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-...
在css3中background-clip属性与background-origin属性的用法介绍
12-13
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间...
深入浅出CSS3 background-clip,background-origin和border-image教程
09-25
最近在准备一个下学期参加比赛的概念网站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档和说明发现很多臆想中的效果都实现不了。
分包合同计量单.docx
07-13
分包合同计量单.docx
树莓派简介PPT课件.ppt
07-13
树莓派简介PPT课件.ppt
项目债务盘点明细表.docx
07-13
项目债务盘点明细表.docx
全网最热Python3入门+进阶 更快上手实际开发
最新发布
07-13
网最热Python3入门+进阶 更快上手实际开发 第1章 Python入门导学.mp4 239.6MB 第9章 高级部分：面向对象 第8章 Python函数 第7章 包、模块、函数与变量作用域 第6章 分支、循环、条件与枚举 第5章 变量与运算符 第4章 Python中表示“组”的概念与定义 第3章 理解什么是写代码与Python的基本类型 第2章 Python环境安装 第1章 Python入门导学 第14章 Pythonic与Python杂记 第13章 实战：原生爬虫 第12章 函数式编程： 匿名函数、高阶函数、装饰器
管理干部培训计划PPT模板
07-13
【作品名称】：管理干部培训计划PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
background-origin和background-clip
05-28
`background-origin` 和 `background-clip` 都是与 CSS 背景相关的属性。 `background-origin` 属性定义了背景图片的定位区域，可以取值为 `padding-box`、`border-box` 或 `content-box`。 - `padding-box`：背景...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值