• 技术文章 >web前端 >css教程

    css如何设置banner图自适应

    醉折花枝作酒筹醉折花枝作酒筹2021-04-14 18:39:12原创887

    在css中,可以使用“background-size”设置banner图自适应,语法“background-size:cover”;其中cover是指把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    //test.css
    .index-banner-top {
        width: 100%;
        background: url(../imgs/guanyu.png) no-repeat center center;
        height: 210px;
        background-size:cover
    }
    @media only screen and (max-width: 640px){
    
        .index-banner-top {
            height: 100px;
        }
    }
    //test.html
    <p class="index-banner-top"></p>

    电脑端显示:

    手机端显示:

    以上就是css如何设置banner图自适应的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 自适应
    上一篇:css怎么给删除线设置颜色 下一篇:css有哪些选择器
    Web大前端开发直播班

    相关文章推荐

    • 如何判断浏览器是否支持css3• css3动画如何停止• css怎么设置超出自动换行• css如何设置滚动条颜色• css如何实现阴影效果

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网