简单了解background-origin

最新推荐文章于 2022-11-03 12:06:54 发布
最新推荐文章于 2022-11-03 12:06:54 发布
阅读量2.2k 收藏 9
点赞数 2
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43347855/article/details/112219059
版权

background-origin相对于内容框来定位背景图像

这句话很笼统，举个例子，下面的代码，background-position是 10px 10px，意思是距离左边10px，上边10px，那应该是距离这个容器的border，还是padding，还是content10px呢，所以background-origin有三个值

padding-box 背景图像相对于内边距框来定位。

border-box 背景图像相对于边框盒来定位。

content-box 背景图像相对于内容框来定位。在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这里还有一个要注意的，就是background-size，不是指容器的大小，应该是指背景图片的大小，如下，这里我把背景图片的宽度设置了60px

在这里插入图片描述

有趣的万里挑一
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在css3中background-clip属性与background-origin属性的用法介绍
12-13
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间...
css3属性中background-clip与background-origin的用法释疑
菜鸟史
12-27 549
css3属性中background-clip与background-origin的用法释疑 困惑在哪里？ background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。 比如
CSS3之背景定位原点background-origin
梦龙小站
10-16 3404
背景定位原点background-origin是CSS3新添加的有关背景的属性，主要是改变背景起始的原点位置的。CSS3之背景定位原点background-origin的属性值有三个：border、padding和content。下面将围绕着三个属性值为大家介绍CSS3之背景定位原点background-origin。
CSS背景属性,background-origin和background-clip
w875471321的博客
10-16 4801
一.background-origin background-origin用来控制背景图片的位置 他有两个值: padding-box(默认):指定背景图片由padding开始展示 content-box:指定背景图片在内容区域开始展示 border-box:指定背景图片在边框区域开始展示 1.background-origin:padding-box(...
CSS3背景（background-size、background-origin、background-clip）圆角
m0_64460142的博客
04-04 2232
1.background-size，规定背景图像的尺寸 当图片需要用背景图像设置需求时使用background：url（图片路径）使用，但是图片大小时原本图片的尺寸，伪类把它变成自己需求的尺寸就可以使用background-size。如下： <style> .box{ width: 400px; height: 200px; border: 2px solid rgb(76, 234, 234); ...
CSS background-origin属性
热门推荐
小阳的博客
12-02 1万+
我在讲解background-position属性时引出了背景图片坐标系的应用。当时说背景图片是相对于坐标原点定位的，而这个坐标原点就位于border-box区域的左上起点，其实这是不严谨的。因为那是默认情况下，而这里要讲解的background-origin属性就是控制这个坐标原点的位置的。Origin有“起源”的意思，而background-origin就有“背景图片起点”的意思。它是告诉浏览器
02-CSS属性：背景属性
weixin_45311714的博客
11-03 4720
比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。区域内的部分显示，区域外的隐藏。
css background参数设置问题
张木期的博客
05-29 1万+
背景属性详解 background-repeat background-repeat 属性用来设置背景图像的铺排填充方式, 默认值: repeat 。 取值说明: repeat-x 表示横向上平铺, 相当于设置两个值 repeat no-reapeat; repeat-y 表示纵向上平铺, 相当于设置两个值 no-repeat repeat; repeat 表示横向纵向上均平铺; no-repea...
CSS3教程：background-clip和background-origin
01-19
background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。 background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-...
css中background-origin属性的使用解析
12-02
background-origin用来规定元素背景图像的相对定位位置，它有三个属性值： 1、border-box border-box表示元素背景图像相对于border区域开始定位。 代码如下： <!doctype html> <html> <head> <...
CSS3中background-clip和background-origin的区别示例介绍
09-25
本文为大家介绍下CSS3中background-clip和background-origin的区别，感兴趣的朋友可以参考下
CSS之background-origin属性
tian361zyc的博客
06-22 1454
CSS
background-clip和background-origin 详解
邓惠子飞吧
01-26 547
<div class="box border-box"/> <div class="box padding-box"/> <div class="box content-box"/> <div class="box clip-border-box"/> <div class="box clip-padding-box"/> <di...
CSS background-origin
broken_promise的博客
03-13 974
background-origin 这个属性用来指定背景图片原点位置. 语法 关键字 border-box: 背景图片相对于 border-box 定位 padding-box: 默认值, 背景图片相对于 padding-box 定位 content-box: 背景图片相对于 content-box 定位 看代码 <div class="box box9">你好<br>世界</div> <div class="box box10">你好<
CSS3 背景原点(background-origin),背景从什么位置开始显示
houyanhua1的专栏
03-21 1443
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box { width: 500px;
background-origin属性使用示例
Elna_99的博客
03-21 1628
background-origin用来决定background-position的参考原点，即背景图片定位的起点。取值有content-box,padding-box,padding-box三种。 content-box:背景图像相对于内容框来定位： .padding-box{     width: 314px;     height: 500px;     border: 1p
background-origin 与 background-position的关联
hzxOnlineOk的博客
01-25 731
background-origin是规定以哪以下3种中的某一种来定位背景图片，与box-sizing（border-box或者content-box）同理 padding-box背景图像相对于内边距框来定位。 border-box背景图像相对于边框盒来定位。 content-box背景图像相对于内容框来定位。 与 background-position的关联： background-...
CSS3 背景起始位置 background-origin属性
歪脖先生的博客
02-18 4246
背景起始位置默认情况下，CSS 背景图像从元素的 padding 区域的左上角开始显示。然而，有时候却希望背景图像从边框的左上角、或内容区的左上角开始显示。这时，就可以通过 background-origin属性来设置背景图像的起始显示位置，可选值有 border-box | padding-box | content-box，默认值为 padding-box。border-box 表示背景图像从...
HTML/CSS: background-clip 与 background-origin的区别
linwh8的博客
09-23 4936
在CSS2中，背景图片定义的位置是相对于其包含元素的填充(padding)的外部界限的，所有的溢出都会扩展到边框之下。CSS3引入了两个新的属性，可以对其进行更精细的控制。第一个属性是：background-clip 第二个属性是：background-origin其对应语法如下：E { background-clip: keyword; } F { background-orig
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、付费专栏及课程。

余额充值