用DIV套DIV实现水平居中布局和背景图片平铺(示例)

        
       #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;属性设置背景图像的起始位置

描述
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

如果您仅规定了一个关键词,那么第二个值将是"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;}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敦厚的曹操

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值