html表单如何添加背景图片

html表单如何添加背景图片,第1张

在Dreamweaver CS6中新建一个html空白文档,将页面内容放入<body></body>中。选中背景图即可插入。

详细步骤:

工具/材料:

1、新建文件夹并将其命名为“表格”。

2、将背景图放入新建的”表格“文件夹里。

3、在Dreamweaver CS6中新建一个html空白文档。

4、将页面内容放入<body></body>中。

5、在<body后按一下空格键,找到background,再按空格,点击“浏览”,找到背景图的位置。

6、选中背景图,点击“确定”。

7、图片插入完成。

8、将这个html另存为在“表格”文件夹里。

9、点击这个预览图标,就可以在浏览器中查看效果。

10、完成效果图。

参考资料:

百度百科-HTML表单

首先,在楼主源代码的基础上解决问题。

在不切图的情况下可以利用CSS的Background属性来解决问题。

但建议楼主的那一幅背景图片顶上的透明要先去掉。以便于标题有更多的空间显示。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table width="753" border="0" height="1150" align="center">

<tr><td colspan="3" class="title"></td></tr>

<tr>

<td width="65" class="left"></td>

<td valign="top" class="content">

主要内容

</td><td width="37"></td>

</tr>

<tr>

<td class="b1"></td>

<td height="100" align="left" valign="top" class="b2">下面的按钮</td>

<td></td>

</tr>

</table>

<style type="text/css">

/*第一段TR,标题使用,只显示至80像素之前的背景*/

.title{

height:80px

background-image:url("http://wz14.cn/images/tablebg.png")

background-repeat: no-repeat/*背景不重复*/

}

/*第二段TR将显示完整的背景*/

.content{

background-image:url("http://wz14.cn/images/tablebg.png")

background-position:-65px -80px/*显示顶部80px后左侧65px后的背景,即没有圆孔部分的背景*/

background-repeat: repeat-y

}

.left{

background-image:url("http://wz14.cn/images/tablebg.png")

background-position:0 -80px/*显示圆孔部分的背景*/

background-repeat: repeat-y

}

/*第三段TR后将重复白色部分的背景*/

.b1{

background-image:url("http://wz14.cn/images/tablebg.png")

background-position:0px -450px

background-repeat: repeat-y

}

.b2{

background-image:url("http://wz14.cn/images/tablebg.png")

background-position:-65px -450px

background-repeat: repeat-y

}

table{

border-collapse:collapse

border-spacing:0

}

 

th,td{

padding:0

}

</style>

</body>

</html>

最后,不过就个人建议,此类背景问题应该善用DIV+CSS,在Table中解决是非常麻烦的事情。

因为需要在每一个TD上都加上相对应的Class。

而如果采用DIV,可以节省非常多不必要的麻烦。

HTML表格的背景色怎么插入啊可以这样解决:

1、首先要在hbuilder页面进行编辑 *** 作。

2、添加颜色。

3、然后设置bgcolor。

4、然后设置合适的自己需要的颜色。

5、背景颜色就添加完成了。

这样就解决了问题。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6197419.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-17
下一篇 2023-03-17

发表评论

登录后才能评论

评论列表(0条)

保存