欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

背景图片适应屏幕大小的一些方法

程序员文章站 2022-05-31 20:57:11
...

背景图片适应屏幕大小的一些方法
想要背景图片适应屏幕的大小，背景图片要足够大，可以铺满常用的所有屏幕，还要图片要高清，不能一拉伸就失真，不能显示局部的时候显得很怪异。

方法一： 运用ul的宽度自适应特性

    <title>运用ul的宽度自适应特性</title>
    <style>
        *{margin: 0;padding: 0}
        ul li{list-style: none;}
        .bg{
            overflow: hidden;
            z-index: -1;
            height: 100%;
        }
        .bg_img img{width: 100%;}
    </style>
    <script src="js/jquery-1.10.1.min.js"></script>
</head>
<body>
<div class="bg">
    <ul>
        <li class="bg_img">
            <img src="images/bg_1.jpg">
        </li>
    </ul>
</div>
<script>
    $(function () {
        var height =  window.screen.availHeight ;
        $(".bg_img img").css("height",height);
    })
</script>

注意：背景图片的z-index为负数。如图。
背景图片适应屏幕大小的一些方法

方法二：背景图片两侧模糊，颜色和整个区域的背景颜色一样

<style>
.inner{position:relative;width:"图片宽度"；margin:auto;}
</style>
  <div style="width:100%;backgroud-color:rgba();">
        <div class="inner">
            <img src="">
        </div>
  </div>

把图片完整的放进div,把父级div的背景颜色设成和图片两侧颜色相同的。具体可参照百度开发者工具里的轮播。

相关标签： 图片 自适应 背景

上一篇： CSS元素在父元素居中显示总结

下一篇： CSS实现三栏自适应布局（两边宽度固定，中间自适应）

推荐阅读