网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 生活知识 知识问答

css3中background-origin的用法

时间:2026-02-14 14:21:45

1、新建文件创建div样式

css3中background-origin的用法

2、创建两个盒子

css3中background-origin的用法

3、效果展示

css3中background-origin的用法

4、background-origin属性的应用

css3中background-origin的用法

5、效果如图

css3中background-origin的用法

6、background-origin属性的应用

css3中background-origin的用法

7、效果如图

css3中background-origin的用法

8、附上源码

<body>

<style>

.div{

    background:url(11.png)  no-repeat;

background-size:100px;

    padding: 45px;

background-position:left;

border:1px solid black;

margin-top:15px;

}

#id1{ background-origin:border-box;}

#id2{/*background-origin:content-box;*/ background-origin:padding-box;}

</style>

<div id="id1"  class="div">

  背景图像边界框的相对位置背景图像边界框的相对位置背景图像边界框的相对位置背景图像边界框的相对位置

</div>

<div id="id2"  class="div"> 

  背景图像边界框的相对位置背景图像边界框的相对位置背景图像边界框的相对位置背景图像边界框的相对位置

</div>

</body>

css3中background-origin的用法

© 2026 智德知识库
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com