css3背景定位-优快云博客

本文详细介绍了CSS中背景定位的相关属性及使用方法，包括background-position、background-origin和background-clip等，帮助读者理解如何精确控制背景图片的位置。

<!DOCTYPE html>
<html>
<head>
<title>背景定位</title>
<style type="text/css">
div{
width: 700px;
height: 500px;
margin: 50px;
border:dashed 20px;
padding: 50px;
background-image: url('img/1.jpg');

/*背景重复 repeat-x 轴方向重复*/
background-repeat: no-repeat;
/*第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%*/
/*background-position: 10px 50px;*/
/*background-position的值也可以是如top left top center 等等
如果只写一个值另一个就是默认为center*/
/*background-position: top;*/
/*也可以为百分比和数值的同理*/
/*background-position: 10% 0;*/
/*background-origin 属性规定 background-position 属性相对于什么位置来定位
border-box 盒子边框就是代表从border开始定位以boder的最外边为0 0
content-box 盒子内容代表以内容区域的开始为0 0*/
background-origin: border-box;
/*background-clip 属性规定背景的绘制区域也就是边框裁剪背景*/
background-clip: content-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>