您好,欢迎来到点滴吧! 手机版
点滴吧www.diandiba.com
记录点点滴滴,尽在点滴吧
  • 文章
  • 文章
  • 特效
  • 素材
  • 景点
您现在的位置:首页 > CSS教程 > 文章正文
一种让超大banner图片不拉伸、全屏宽、居中显示的方法
更新时间:2015/7/15 13:57:18   点击:6655次

现在很多网站的Banner图片都是全屏宽度的,这样的网站看起来显得很大气。这种Banner一般都是做一张很大的图片,然后在不同分辨率下都是显示图片的中间部分。实现方法如下:

<html>

<head>

    <title>Title</title>

    <style>

        .bannerbox {width:100%;position:relative;overflow:hidden;height:200px;}

        .banner {width:3000px;position:absolute;left:50%;margin-left:-1500px;}

    </style>

</head>

<body>

    <div class="bannerbox">

        <div class="banner">

            <imgsrc="t1.jpg">

        </div>

    </div> 

</body>

</html>

把css中 .bannerbox 中 height 及 .banner 和 width 换成你banner图的大小,然后 .banner 中margin-left 的值改成banner图宽度的一半即可。

相关文章
导航分类
热门文章
关于我们| 联系我们| 免责声明| 网站地图|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2