html怎么添加背景图片且让图片平铺整个页面？（代码示例）-css教程-PHP中文网

html怎么添加背景图片且让图片平铺整个页面？（代码示例）

藏色散人

发布： 2018-08-11 16:47:26

原创

153407人浏览过

有的网站页面中如果加入好看的背景图片是更能够引人注目的，可是我们该怎么进行网页背景图片设置呢？而且通常会被要求html背景图片平铺的展现效果。这对于稍懂一些html/css知识的朋友来说应该并不是难事。那么本篇文章主要针对新手朋友们，来详细介绍html背景图的添加使用方法。可供大家参考。

一、html背景图横向平铺代码示例：

<style type="text/css">
    body{
        font-size:12px;
        font-family:"宋体";
        background-image:url(2.png);
        background-repeat:repeat-x;
        COLOR: #0C2B30;
    }
</style>

登录后复制

效果如下图：

稿定抠图

AI自动消除图片背景

查看详情

二、html背景图纵向平铺代码示例：

立即学习“前端免费学习笔记（深入）”；

    body{
        font-size:12px;
        font-family:"宋体";
        background-image:url(2.png);
        background-repeat:repeat-x;
        COLOR: #0C2B30;
    }

登录后复制

效果如下图：

三、html图片全屏代码示例：

html,body{
    width: 100%;
    height: 100%;
}
.mui-content{
    background: url(2.png) bottom center no-repeat #efeff4 ;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}

登录后复制

效果如下图：