#login
{
width:100%;
height:345px;
background-color:#e2e8c4;
}
#login div
{
/* background-color:Green; */
height:345px;
width:1280px;
margin:0 auto; /*水平居中*/
padding-top:0px;
background-image:url(images/login/1_08.gif); /* 图片地址 */
background-repeat: no-repeat; /* 是否重复 */
background-position: right bottom;
}
<div id="login">
<div> </div>
</div>
1、background-image:url(images/login/1_08.gif); /* 图片地址 */
2、 background-repeat: no-repeat; /* 是否重复 */
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
3、 background-position: right bottom;属性设置背景图像的起始位置
值 | 描述 |
---|---|
| 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
4、background-size 属性 背景图像的尺寸
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
值 | 描述 | |
---|---|---|
length | 设置背景图像的高度和宽度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 | |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 | |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 | |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
5、background-origin 属性规定 background-position 属性相对于什么位置来定位。
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}
值 | 描述 | 测试 |
---|---|---|
padding-box | 背景图像相对于内边距框来定位。 | 测试 |
border-box | 背景图像相对于边框盒来定位。 | 测试 |
content-box | 背景图像相对于内容框来定位。 |
6.最新最有效的设置,由其对于图片图标的应用
dd { background:#e9e8e8 url('images/up.png') no-repeat scroll 1px 10px; background-size:13px 13px;}