css background-origin属性怎么用


本文摘自PHP中文网,作者藏色散人,侵删。

css background-origin属性background-origin属性用于设置背景图片的定位区域。语法:background-origin: padding-box|border-box|content-box;其中三个属性值分别表示:相对于内边距框定位、相对于边框盒定位、相对于内容框定位。

css background-origin属性怎么用

作用:规定 background-position 属性相对于什么位置来定位。

语法:

1

background-origin: padding-box|border-box|content-box;

说明:padding-box 背景图像相对于内边距框来定位。border-box 背景图像相对于边框盒来定位。content-box 背景图像相对于内容框来定位。

注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。

css background-origin属性使用示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<!DOCTYPE html>

<html>

<head>

<style>

div

{

border:1px solid black;

padding:35px;

background-image:url('http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/005/656/5af270fd37755429.jpg');

background-repeat:no-repeat;

background-position:left;

}

#div1

{

background-origin:border-box;

}

#div2

{

background-origin:content-box;

}

</style>

</head>

<body>

<p>background-origin:border-box:</p>

<div id="div1">

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

</div>

<p>background-origin:content-box:</p>

<div id="div2">

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

</div>

</body>

</html>

效果输出:

3e1e3c98bdbd5495f2d34c41fd500d9.png

以上就是css background-origin属性怎么用的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css如何设置边框透明

css的样式规则是什么样的

css代码如何居中

dw怎么创建css文件

css垂直居中的方法有哪些

css box-sizing属性怎么用

如何理解html、css、javascript之间的关系?

css如何实现虚线边框滚动效果

css实现禁止页面文字被选中功能

css样式怎么写在jsp中

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...