欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

background-origin属性怎么用

发布时间:2019-05-21  编辑:杨雨个人博客网站   点击:   

背景起源属性是用于设置背景图片的定位区域,它有三个值分别表示相对于内边距框定位,相对于边框盒定位,相对于内容框定位。

 

背景出身属性怎么用

CSS3 background-origin属性

作用:规定背景图片的定位区域。

说明:设置或检索对象的背景图像计算<'background-position'>时的参考原点(位置)。

语法:

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

填充盒:背景图像相对于内边距框来定位。

边界框:背景图像相对于边框盒来定位。

内容框:背景图像相对于内容框来定位。

CSS3 background-origin属性的使用示例

<!DOCTYPE Html>
<HTML>
<HEAD>
<风格> 
DIV
{
边框:1px纯黑色;
填充:35px;
背景图像:网址( 'https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg');
背景重复:不重复;
背景位置:左;
}
#DIV1
{
背景由来:边界框;
}
#DIV2
{
背景由来:内容箱;
}
</样式>
</ HEAD>
<BODY>

<P>背景来源:边界框:</ p>
<div id =“div1”>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</ DIV>

<P>背景来源:内容框:</ p>
<div id =“div2”>
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</ DIV>

</ BODY>
</ HTML>

效果图:

1.JPG

本文地址:http://itbyc.com/web/css3/19655.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1