关于HTML怎样用图片做背景

最新推荐文章于 2021-06-21 09:37:49 发布

原创最新推荐文章于 2021-06-21 09:37:49 发布 · 2.3w 阅读

65 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Java笔记

本文介绍如何使用HTML和CSS设置网页及表格的背景图片，并提供多种显示效果如平铺、居中不重复等。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

1、网页背景图片：
（平铺背景图片）
<body background="e:\images\背景.jpg">或者<body style="background-image: url(/service/e:\images\%E8%83%8C%E6%99%AF.jpg);">

（背景图片居中不重复）

（背景图片不重复）
<body style="background-image: url(/service/e:\images\背景.jpg) no-repeat;">

注释：style 后双引号部分为CSS样式；
background-image:url(https://blog.csdn.net/%E5%9B%BE%E7%89%87%E8%B7%AF%E5%BE%84) 为背景图片
no-repeat 不重复；
50% 0 即(水平位置垂直位置) 水平50%既居中,垂直0px；

2、表格中插入图片背景：
<table>
< tr>
< td width="300" height="300" background="e:\images\背景.jpg">
< /td>
< /tr>
< /table>
表格背景图片也可跟上面一样采用CSS样式，如：<td style="background-image: url(/service/e:\images\背景.jpg);"> </td>。

注意：图片路径问题，用e:\images\背景.jpg只能在你自己的电脑上有效，上传到网站上，建议images文件夹和网页放在同一目录，则图片路径改为：“images/背景.jpg”。(当前目录的上一目录表示：../)

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

标签

#java #html #css #url #图片