background-origin

最新推荐文章于 2022-03-13 21:30:03 发布
原创 最新推荐文章于 2022-03-13 21:30:03 发布 · 288 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

本文介绍如何使用 CSS 的 background-origin 属性来控制背景图片在元素中的显示位置，包括内容区域、内边距区域及边框区域。

控制背景图片显示位置

background-origin：content-box | padding-box | border-box

参数代表表示背景图片是从内容区域 内边距（默认） 边框 仅在background-repeat:no-repeat；有效


在css3中background-clip属性与background-origin属性的用法介绍
12-13
background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间...
css中background-origin属性的使用解析
12-02
在CSS（层叠样式表）中，`background-origin`是一个重要的属性，用于定义元素的背景图像相对于哪个区域开始定位。这个属性提供了更多的控制，使设计师能够精确调整背景图像的显示方式，以达到理想的设计效果。`...
CSS3---background-origin
diyinjiao1404的博客
04-29 148
设置元素背景图片的原始起始位置。 语法： background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。 效果如下： 需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。 转载于:https://www....
CSS background-origin属性
guolulu66的博客
10-13 1057
我在讲解background-position属性时引出了背景图片坐标系的应用。当时说背景图片是相对于坐标原点定位的，而这个坐标原点就位于border-box区域的左上起点，其实这是不严谨的。因为那是默认情况下，而这里要讲解的background-origin属性就是控制这个坐标原点的位置的。 Origin有“起源”的意思，而background-origin就有“背景图片起点”的意思。它是告诉浏览器background-position是相对于哪里定位的。有人会想到background-repeat属性
background-origin/background-clip
娓娓道来
07-27 205
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ...
CSS background-origin
broken_promise的博客
03-13 1074
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-clip和background-origin
01-19
background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。 background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-...
CSS3中background-clip和background-origin的区别示例介绍
09-25
在CSS3中，background-clip和background-origin是两个和背景相关的属性，它们分别控制背景的显示区域和绘制区域，虽然它们的功能有些相似，但是作用的侧重点并不相同。 1. background-clip属性： background-clip...
CSS之background-origin属性
tian361zyc的博客
06-22 1655
CSS
CSS3 -- 背景原点（background-origin）
weixin_30339969的博客
05-12 259
1、background-origin 语法、取值 　　CSS3属性background-origin，主要用来决定背景图片的定位原点，（即背景图片定位的起点 --- background-position的原点）。 　　background模型图（元素默认时的背景图像原点位置） 元素Background中的background-color原点位置是在Border的外边缘处； ...
CSS3 background-origin
Bi-Hu的博客
09-09 190
background-origin background-origin规定了指定背景图片background-image属性的原点位置的背景相对区域. 注意：当使用background-attachment为fixed时，该属性将被忽略不起作用。 属性值 border-box背景图片的摆放以border区域为参考padding-box背景图片的摆放以padding区域为参考content...
background-origin属性
hugejihu9的专栏
01-16 447
文章来自：源码在线https://www.shengli.me/css/590.html         效果图展示：        
简单了解background-origin
weixin_43347855的博客
01-05 2428
background-origin相对于内容框来定位背景图像 这句话很笼统，举个例子，下面的代码，background-position是 10px 10px，意思是距离左边10px，上边10px，那应该是距离这个容器的border，还是padding，还是content10px呢，所以background-origin有三个值 padding-box 背景图像相对于内边距框来定位。 border-box 背景图像相对于边框盒来定位。 content-box 背景图像相对于内容框来定位。 这里还有一个
background-origin 属性
u010227447的专栏
07-14 727
实例 相对于内容框来定位背景图像： div { background-image:url('smiley.gif'); background-repeat:no-repeat; background-position:left; background-origin:content-box; } 语法background-origin: padding-box|border-box|con
CSS3 的 background-origin 属性
qq_46582421的博客
04-21 458
伸展背景图像完全填充内容区域： background-origin 属性指定了背景图像的位置区域。 content-box, padding-box,和 border-box区域内可以放置背景图像。 background-origin 属性指定了背景图像的位置区域。 content-box, padding-box,和 border-box区域内可以放置背景图像。 ...
CSS背景属性,background-origin和background-clip
w875471321的博客
10-16 6085
一.background-origin background-origin用来控制背景图片的位置 他有两个值: padding-box(默认):指定背景图片由padding开始展示 content-box:指定背景图片在内容区域开始展示 border-box:指定背景图片在边框区域开始展示 1.background-origin:padding-box(...
CSS学习（八）-background-origin、background-clip
bwshqh的博客
03-06 1064
一、理论： 1.css背景属性简介： a.background-color 背景颜色 b.background-image 背景图片 c.background-repeat 铺放格式 d.background-attachment 固定或者滚动 e.background-position 设置背景图片位置 f.background-origin 指定绘制背景图片的起点 g.back
7. background-origin和background-origin
最新发布
08-01
### `background-origin` 属性详解 `background-origin` 是 CSS 中用于控制背景图像定位区域的属性，具体来说，它定义了 `background-position` 的参考原点。换句话说，它决定了背景图像在元素内部的起始绘制位置[^...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值