CSS3 background-origin属性
作用:划定背景图片的定位地区。
申明:设置或检索对象的背景图象盘算 <' background-position '> 时的参考原点(位置)。
语法:
background-origin: padding-box|border-box|content-box;
padding-box:背景图象相对于内边距框来定位。
border-box:背景图象相对于边框盒来定位。
content-box:背景图象相对于内容框来定位。
CSS3 background-origin属性的运用示例
<!DOCTYPE html> <html> <head> <style> div { border:1px solid black; padding:35px; background-image:url('https://img.ki4.cn/upload/article/000/000/024/5c513adf97e86533.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>
效果图:
以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。更多精彩内容人人能够关注ki4网相干教程栏目!!!
以上就是background-origin属性怎样用的细致内容,更多请关注ki4网别的相干文章!