html怎么添加背景图片且让图片平铺整个页面?

有的网站页面中如果加入好看的背景图片是更能够引人注目的,可是我们该怎么进行网页背景图片设置呢?而且通常会被要求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中文网其它相关文章!

版权声明:若无特殊注明,本文为《》原创,转载请保留文章出处。
本文链接:http://www.livesloan.com/post-335.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗 胜利 不高兴 阴险 乖 酷 滑稽

评论信息框
可使用QQ号实时获取昵称+头像

私密评论

吃奶的力气提交吐槽中...

已有1条吐槽

星凯博客

2019-12-15 17:36
face 学到了 老铁 自己踩一下