小小 风格酷带您学习CSS3 的 background-origin 属性
如遇下载链接蓝奏网盘打不开lanzous替换成lanzoux尝试！ 广告
CSS3 的 background-origin 属性
background-origin 属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
实例
在 content-box 中定位背景图片：
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
}
实例源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>菜鸟教程</title>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>背景图像边界框的相对位置：</p>
<div id=”div1″>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<p>背景图像的相对位置的内容框：</p>
<div id=”div2″>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</body>
</html>
运行结果：
NOTICE:【咨询风格酷】客服微信：wwwxmamnet
NOTICE:【风格酷模板网②群】QQ群：288678775
☉免责声明：本站所有模板均来自用户分享和网络收集，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服，我们核实后会立即删除。
☉如果源码网盘地址失效！或有其他问题，请点我报错,谢谢合作！
☉人民币与积分汇率为1比10,即1元=10积分.有任何疑问请联系客服！
☉如有其他问题，请加网站客服QQ(1131734965)进行交流。
☉本站提供的源码、模板、软件工具等其他资源，都不包含技术服务，请大家谅解！
☉源码、模板等资源会随着技术、环境的升级而存在部分问题，还请慎重选择。
