争怎路由网/网站教程/内容

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

网站教程2024-03-23 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
有的网站页面中如果加入好看的背景图片是更能够引人注目的，可是我们该怎么进行网页背景图片设置呢？而且通常会被要求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>

效果如下图：

be54517ba0e4631e65197fd61fe39ed.png

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

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

效果如下图：

a68cc9bdd82ba2c16514606ca2dd5cf.png

三、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%;
}
效果如下图：
8e4d4443e98d9c9e2d44e0216510f4a.png
那么以上给大家总结了关于怎么让html设置背景图片、html背景平铺等相关知识。希望对有需要的朋友有所帮助。
注：
background 简写属性在一个声明中设置所有的背景属性。
background-size 属性规定背景图像的尺寸。
background-repeat 属性设置是否及如何重复背景图像。默认的背景图像在水平和垂直方向上重复。
background-image 属性为元素设置背景图像。
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。
以上就是html怎么添加背景图片且让图片平铺整个页面？（代码示例）的详细内容，更多请关注php中文网其它相关文章！
				
				

					
  • 微信
    • 
					
    • 
				

    网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



          
    ……
    标签:html怎样添加背景图片且让图片平铺整个页面？（代码示例）
     
    相关阅读