• 注册
  • 前端后端 前端后端 关注:1 内容:71

    css 中 background:url 背景图片如何铺满并正常显示

  • 查看作者
  • 打赏作者
  • 帅气冲天

    前言

    css 中 背景图片如何铺满并正常显示

    方案

    1.铺满body区(用做网页背景)

    .body{
        background:url('../imgs/beijing.jpg') no-repeat center 0px;
        background-position: center 0px;
        background-size: cover;
    }

    2.只让该图片铺满一个元素区域

    .kuang{
        height: 300px;
        width: 300px;
        background:url('../imgs/beijing.jpg') no-repeat center 0px;
        background-position: center 0px;
        background-size: cover;
        text-indent: -999px;
    }

    说明

    url('图片路径') – 图片路径的位置;

    no-repeat –  图片不重复

    center 0px –  center是距离页面左边的定位,0px是距离页面上面的定位

    background-position: center 0px –  就是图片的定位,同上

    background-size: cover –  把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中

    min-height: 100vh –  视窗的高度,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/ window.innerHeight大小

    请登录之后再进行评论

    登录

    我关注的论坛

    暂没有数据

  • 发布内容
  • 做任务
  • 偏好设置
  • 直达底部
  • 帖子间隔 侧栏位置: