竭诚为您提供优质文档/双击可除
html表格中图片铺满
篇一：html表格布局实例
[html]表格布局之实例版
|[>]
前面我们讲了html表格的基础知识，今天我们通过一个实例让大家更清晰的了解下表格的用途。
例如：我们做一个简单的网站布局，代码如下：
bordercolor="#00ff99">
网站名称
网站标题
搜索框
左边
中间
右边
网站底部信息
产生如下的表格：
这是一张整体的表格，第一行和第四行分别跨度了三列，这里用
colspan="3"来限制，而第二行的“搜索框”占用了两列的位置，用colspan="2"控制；align="center"是对表格内文字的对齐限制，center表示中间，right表示靠右，left靠左。
表格的基础设置，可以参考：
左边
中间
右边
网站底部信息
产生如下的表格：
这是一张整体的表格，第一行和第四行分别跨度了三列，这里用
colspan="3"来限制，而第二行的“搜索框”占用了两列的位置，用colspan="2"控制；align="center"是对表格内文字的对齐限制，center表示中间，right表示靠右，left靠左。
表格的基础设置，可以参考：
[html]利用表格规划网站布局
[html]如何制作多行多列的表格
[html]设定表格的尺寸和边框
如果你现在可以根据自己的想法制作出一个表格了，那么你就是向自己制作模板迈近了一步。^o^
表格布局现在仍然很多人在用，方便实在。
网页设计现有两种布局方法，一种即是表格布局，另一种是现在w3c极力推荐的css布局。不过，就目前来说，由于xhtml并未完全占据主流，表格布局依然是大多数网页设计师的首选。
你所描述的问题属于表格的对齐问题，解决方式有以下几种：
如果两个表格的宽度不一致，那么选择默认的对齐方式，也即左对齐，在html中的标签和属性是：就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式，例如居中对齐，而第二个表格并没有设置对齐方式，所以默认为左对齐，这样就出现了上述问题。
我的一些表格布局的经验：
[html]如何制作多行多列的表格
[html]设定表格的尺寸和边框
如果你现在可以根据自己的想法制作出一个表格了，那么你就是向自己制作模板迈近了一步。^o^
表格布局现在仍然很多人在用，方便实在。
网页设计现有两种布局方法，一种即是表格布局，另一种是现在w3c极力推荐的css布局。不过，就目前来说，由于xhtml并未完全占据主流，表格布局依然是大多数网页设计师的首选。
你所描述的问题属于表格的对齐问题，解决方式有以下几种：
如果两个表格的宽度不一致，那么选择默认的对齐方式，也即左对齐，在html中的标签和属性是：就能实现左边对齐。你现在出现的问题有可能是第一个表格设置了对齐方式，例如居中对齐，而第二个表格并没有设置对齐方式，所以默认为左对齐，这样就出现了上述问题。
我的一些表格布局的经验：
1、表格布局第一步：先插入一个表格，宽度是760-780px（记住，一定要用px，不要用百分比），高度不用设置，然后令这个表格居中。以后所有的内容都限制在这个表格中。
2、熟练使用表格嵌套。也就是说，在一个表格中再插入另一个表格。举个例子，把你要设计的页面分成大的几个部分，然后利用表格的行数和列数来控制它们的布局，如果某一个单元格中的内容又要分成几部分，可以继续在这个单元格中插入表格，方法同上。
3、补充：表格的边框一定要为0，即table中的border属性值为"0"。也就是让表格在网页预览中不可见，这样才能实现表格布局的目的。
如何利用表格实现画中画，也就是页中页效果
网页的排版大多使用表格，利用一个表个单元可以嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表
格单元中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对首页进行更新，是不是很方便。我写个最简单的例子代码：＜html＞
＜head＞
＜title＞范例＜/title＞
＜body＞
2、熟练使用表格嵌套。也就是说，在一个表格中再插入另一个表格。举个例子，把你要设计的页面分成大的几个部分，然后利用表格的行数和列数来控制它们的布局，如果某一个单元格中的内容又要分成几部分，可以继续在这个单元格中插入表格，方法同上。
3、补充：表格的边框一定要为0，即table中的border属性值为"0"。也就是让表格在网页预览中不可见，这样才能实现表格布局的目的。
如何利用表格实现画中画，也就是页中页效果
网页的排版大多使用表格，利用一个表个单元可以嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表
格单元中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对首页进行更新，是不是很方便。我写个最简单的例子代码：＜html＞
＜head＞
＜title＞范例＜/title＞
＜body＞
＜tableborder="1"width="100%"＞
＜tr＞
＜td＞
＜iFRamesrc="example.htm"width="300"heitht="100"＞＜/iFRame＞＜/td＞
＜/tr＞
＜/table＞
＜/body＞
＜/html＞
怎么制作网页图片 插入被嵌入页的关键代码是：＜
iFRamesrc="example.htm"width="300"heitht="100"＞＜/iFRame＞。
example.htm是被嵌入的页面，标签＜iFRame＞还有一些可用的参数设置如下：marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth="20"，单位是pix，下同。
marginheight:网页中内容在表格顶部预留的高度；
hspace:网页右上角的的横坐标；
＜tr＞
＜td＞
＜iFRamesrc="example.htm"width="300"heitht="100"＞＜/iFRame＞＜/td＞
＜/tr＞
＜/table＞
＜/body＞
＜/html＞
怎么制作网页图片 插入被嵌入页的关键代码是：＜
iFRamesrc="example.htm"width="300"heitht="100"＞＜/iFRame＞。
example.htm是被嵌入的页面，标签＜iFRame＞还有一些可用的参数设置如下：marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth="20"，单位是pix，下同。
marginheight:网页中内容在表格顶部预留的高度；
hspace:网页右上角的的横坐标；
vspace:网页右上角的纵坐标；
frameborder:是否显示边缘；填"1"表示"是"，填"0"表示"否"
scrolling:是否出现滚动条；填"1"表示"是"，填"0"表示"否"
表格背景图片的一个技巧
大家都知道在一个较大的表格中放入背景图片，背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小，比如下面的一个渐变图，你看上去像是一整张图片，它其实用的就是表格背景重复填充特性，而用的图片就是右边的那张，大小只有1.3k，在此如果要用一张大的图片是很不划算的。你若要插入一根水平线，用这方法也很有效。
如何使鼠标指到表格，表格背景变
这个特效用的是表格样式表，要达到此效果你只需在＜td＞代码中加入
onmouseout="this.style.backgroundcolor="""onmouseover="this.style.backgroundcolor="#FFcccc""，例：
表格布局常见问题解答
frameborder:是否显示边缘；填"1"表示"是"，填"0"表示"否"
scrolling:是否出现滚动条；填"1"表示"是"，填"0"表示"否"
表格背景图片的一个技巧
大家都知道在一个较大的表格中放入背景图片，背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小，比如下面的一个渐变图，你看上去像是一整张图片，它其实用的就是表格背景重复填充特性，而用的图片就是右边的那张，大小只有1.3k，在此如果要用一张大的图片是很不划算的。你若要插入一根水平线，用这方法也很有效。
如何使鼠标指到表格，表格背景变
这个特效用的是表格样式表，要达到此效果你只需在＜td＞代码中加入
onmouseout="this.style.backgroundcolor="""onmouseover="this.style.backgroundcolor="#FFcccc""，例：
表格布局常见问题解答
发布时间：20xx-05-20
1、表格布满页面的问题
我们在很多地方看到为了使页面适应不同的分辨率，通常将表格的大小按百分比设置。刚开始学做网页的时候，我已经把表格的宽度设置为100%，但在浏览器上还是不能满屏显示，四周总有一圈空白，我曾对此感到迷惑不解，后来在论坛请教才知道这不是表格的错。如果你用dreamweaver制作网页，这个问题很好解决，选择菜单modify--＞pageproperties,在弹出的对话框里设置left、top为0就ok了！
2.表格的变形问题
网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况，这也是最另人恼火的事，怎么办呢秋实曾在天极网页陶吧撰文详细的阐述过这个问题，我们来看看他是怎么解决的。
a、因为表格排列设置而在不同分辨率下所出现的错位
这种变形情况是：
1、在800*600的分辨率下时，一切正常，而到了1024*800时，则多个表格或者有的居中，有的却
1、表格布满页面的问题
我们在很多地方看到为了使页面适应不同的分辨率，通常将表格的大小按百分比设置。刚开始学做网页的时候，我已经把表格的宽度设置为100%，但在浏览器上还是不能满屏显示，四周总有一圈空白，我曾对此感到迷惑不解，后来在论坛请教才知道这不是表格的错。如果你用dreamweaver制作网页，这个问题很好解决，选择菜单modify--＞pageproperties,在弹出的对话框里设置left、top为0就ok了！
2.表格的变形问题
网页在不同的屏幕分辨率、或改变窗口时常出现一些页面变形情况，这也是最另人恼火的事，怎么办呢秋实曾在天极网页陶吧撰文详细的阐述过这个问题，我们来看看他是怎么解决的。
a、因为表格排列设置而在不同分辨率下所出现的错位
这种变形情况是：
1、在800*600的分辨率下时，一切正常，而到了1024*800时，则多个表格或者有的居中，有的却
左排列或右排列，很难看，这是什么原因呢？
在解决这个问题之前，我们讲一下表格的排列。表格有左、中、右三种排列方式，如果没特别进行设置，则默认为居左排列，不用说了，这就是问题之所在。在800*600的分辨率下，表格恰好就有编辑区域那么宽，不容易察觉，而到了1024*800的时候，就出现的，解决的办法比较简单，即都设置为居中，或
左或右。
2、同样是这种分辨率切换，表格的上下排列不一致。
上边的所说的是水平错位，而这种则是纵向错位，多发生在一个表格单元里嵌入另一个表格的情况。其原因在于，嵌入的表格默认为竖向居中排列，在800*600分辨率时，这种错位看不出来，而到1024*800
就出现了，解决办法如前，根据情况对排列进行设置，而不是采用其默认设置。
b、采用百分比而出现的变形
这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比
在解决这个问题之前，我们讲一下表格的排列。表格有左、中、右三种排列方式，如果没特别进行设置，则默认为居左排列，不用说了，这就是问题之所在。在800*600的分辨率下，表格恰好就有编辑区域那么宽，不容易察觉，而到了1024*800的时候，就出现的，解决的办法比较简单，即都设置为居中，或
左或右。
2、同样是这种分辨率切换，表格的上下排列不一致。
上边的所说的是水平错位，而这种则是纵向错位，多发生在一个表格单元里嵌入另一个表格的情况。其原因在于，嵌入的表格默认为竖向居中排列，在800*600分辨率时，这种错位看不出来，而到1024*800
就出现了，解决办法如前，根据情况对排列进行设置，而不是采用其默认设置。
b、采用百分比而出现的变形
这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比
是相对于当时窗口的宽度的，常出现在ie浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，这是因为表格的百分比也要随
着窗口的大小而改变成相应的百分比宽度。
当然了，解决办法是不要设置成百分比，我提倡的是，如果表格没有外围嵌套标记，则将宽等设置成固定宽度，如有外围嵌套标记，则将外转嵌套标记的宽度设置为固定值，而表格的宽或高可设置为百分
比，这样就不会出现变形了。
c、表格单元格之间互相干扰引起的变形
这种变形情况通常是在工具里制作主页时没有空隙，而在浏览时却发现莫名其妙地多出一些空隙，
而又不知原因在哪，很是令人讨厌。
本人也经常遇到类似的情况，解决办法一是先看表格设置有没有上面所谈的两种情况，如没有，可
能就是在划分表格时，同一行的单元格之间相互牵制所出现的问题。
我们知道，同一行的表格单元在诸如dreamweaver或Frontpage中经常频繁地被拆分，所
着窗口的大小而改变成相应的百分比宽度。
当然了，解决办法是不要设置成百分比，我提倡的是，如果表格没有外围嵌套标记，则将宽等设置成固定宽度，如有外围嵌套标记，则将外转嵌套标记的宽度设置为固定值，而表格的宽或高可设置为百分
比，这样就不会出现变形了。
c、表格单元格之间互相干扰引起的变形
这种变形情况通常是在工具里制作主页时没有空隙，而在浏览时却发现莫名其妙地多出一些空隙，
而又不知原因在哪，很是令人讨厌。
本人也经常遇到类似的情况，解决办法一是先看表格设置有没有上面所谈的两种情况，如没有，可
能就是在划分表格时，同一行的单元格之间相互牵制所出现的问题。
我们知道，同一行的表格单元在诸如dreamweaver或Frontpage中经常频繁地被拆分，所
以，同一行的单元格与另一个单元格的宽与高不一致，这时，你就要注意两个单元格属性：colspan、rowspan。colspan表示的是横向扩展，而rowspan则表示的是纵向扩展，这个扩展的意思即当前表格单元相邻的横向与竖向
的表格单元数，也可这样理解为表格单元的高或宽是相邻几个表格单元的高或宽的相加和
这个单元格横向所占用的宽度是3个表格单元的宽度(这里取最大值)，即colspan=3；而竖向的高度
是三个表格单元高度的总和，即rowspan=3。
那么我们说的这种变形就和这个设置有关，如果改变相邻单元格的高或宽与个数时，图中所指的单元格也会发生相应的变化，相互制约，调整起来很麻烦，这非我们所希望的，我本人提倡，如果表格比较复杂，最好采取嵌表格的形式，这样，可以少一些单元格之间相互干扰情况，而使单元格之间相对独立。
出现变形有情况还很多，我们就不一一陈述，我建议你在划分表格时，除了一些必要的高、宽设置外，将其它的高、宽设置全部删掉，一则减少了冗余代码，另则，也免除一些摸不着头脑的错误。
3、图片显示的问题
的表格单元数，也可这样理解为表格单元的高或宽是相邻几个表格单元的高或宽的相加和
这个单元格横向所占用的宽度是3个表格单元的宽度(这里取最大值)，即colspan=3；而竖向的高度
是三个表格单元高度的总和，即rowspan=3。
那么我们说的这种变形就和这个设置有关，如果改变相邻单元格的高或宽与个数时，图中所指的单元格也会发生相应的变化，相互制约，调整起来很麻烦，这非我们所希望的，我本人提倡，如果表格比较复杂，最好采取嵌表格的形式，这样，可以少一些单元格之间相互干扰情况，而使单元格之间相对独立。
出现变形有情况还很多，我们就不一一陈述，我建议你在划分表格时，除了一些必要的高、宽设置外，将其它的高、宽设置全部删掉，一则减少了冗余代码，另则，也免除一些摸不着头脑的错误。
3、图片显示的问题
有时候我们明明在单元格中插入了背景图片，而且在dreamweaver的视窗里也可以看到，但是一预览背景图片就不显示了。遇到这种请情况，不要着急，检查一下你的代码是否正确，我们来看下面的表格：
表格代码：
＜tablewidth="300"border="1"cellspacing="0"cellpadding="0"bordercolor="#000000"＞
＜trbackground="hzz01_050213.gif"＞
＜tdheight="19"＞＜/td＞
＜tdheight="19"＞＜/td＞
＜/tr＞
＜/table＞
不错，上面的背景图确实有(background="hzz01_050213.gif")，但由于放错了地方，所以就显示不出来了，请把背景属性放在＜td＞标记里面，然后再预览一次，怎么样，这次出来了吧！
表格代码：
＜tablewidth="300"border="1"cellspacing="0"cellpadding="0"bordercolor="#000000"＞
表格代码：
＜tablewidth="300"border="1"cellspacing="0"cellpadding="0"bordercolor="#000000"＞
＜trbackground="hzz01_050213.gif"＞
＜tdheight="19"＞＜/td＞
＜tdheight="19"＞＜/td＞
＜/tr＞
＜/table＞
不错，上面的背景图确实有(background="hzz01_050213.gif")，但由于放错了地方，所以就显示不出来了，请把背景属性放在＜td＞标记里面，然后再预览一次，怎么样，这次出来了吧！
表格代码：
＜tablewidth="300"border="1"cellspacing="0"cellpadding="0"bordercolor="#000000"＞
＜tr＞
篇二：在word表格中插入图片显示不全问题解决方法
在word表格中插入图片显示不全问题解决方法
1、图片只显示部分
插入的图片，只显示了一点。这种情况只发生在嵌入式（嵌入式：图片文字环绕方式的一种）图片中。
原因：图片的段落设置中的行距被设成“固定行距”了。
调整步骤：
方法一：选中图片——单击右键选择段落——弹出［段落］设置对话框——把固定行距改为“单倍行距”或其他——确定。
方法二：解决办法：改变表格行高至适应图片大小，同时双击图片击打开“设置图片格式”对话框，选择“版式”选项后，再选择其它的“环绕方式”，就可以随意拖动图片。
2、只显示图片的边框
嵌入式图片只显示边框而没有图片。
原因：显示设置中设置了“显示图片框”
篇二：在word表格中插入图片显示不全问题解决方法
在word表格中插入图片显示不全问题解决方法
1、图片只显示部分
插入的图片，只显示了一点。这种情况只发生在嵌入式（嵌入式：图片文字环绕方式的一种）图片中。
原因：图片的段落设置中的行距被设成“固定行距”了。
调整步骤：
方法一：选中图片——单击右键选择段落——弹出［段落］设置对话框——把固定行距改为“单倍行距”或其他——确定。
方法二：解决办法：改变表格行高至适应图片大小，同时双击图片击打开“设置图片格式”对话框，选择“版式”选项后，再选择其它的“环绕方式”，就可以随意拖动图片。
2、只显示图片的边框
嵌入式图片只显示边框而没有图片。
原因：显示设置中设置了“显示图片框”
调整步骤：单击菜单“工具-----选项”打开对话框后点击“视图”去掉“显示图片框”前面的钩。
篇三：css样式表控制背景图片大小
css样式表控制背景图片大小
满意回答
对于图片，首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样，那么就从css控制背景图片讲起吧。
1.css控制背景图片：
对于一个网页，我们开始设计的时候，可能没有过多的去想背景图到底是什么，因为大多都是设计背景就可以了，原因吗，我想也很简单，因为它与前景音乐一样，对于网页的打开，速度会有一定的影响。不过对于一般的个人网站，或者个人博客而言，它对展现自己的个性，当然是不可或缺的了，当然什么都不会太过完美，有好就有坏，也就是当图像不可用但css可用的时候，替换内容就不会显示出来，因此，并不建议在导航按钮文本或类似的情况中使用css背景图片。
控制背景图片的css属性有很多，只要与图片的相关的，大多都会用的上。
(1)、背景图片的导入：
篇三：css样式表控制背景图片大小
css样式表控制背景图片大小
满意回答
对于图片，首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样，那么就从css控制背景图片讲起吧。
1.css控制背景图片：
对于一个网页，我们开始设计的时候，可能没有过多的去想背景图到底是什么，因为大多都是设计背景就可以了，原因吗，我想也很简单，因为它与前景音乐一样，对于网页的打开，速度会有一定的影响。不过对于一般的个人网站，或者个人博客而言，它对展现自己的个性，当然是不可或缺的了，当然什么都不会太过完美，有好就有坏，也就是当图像不可用但css可用的时候，替换内容就不会显示出来，因此，并不建议在导航按钮文本或类似的情况中使用css背景图片。
控制背景图片的css属性有很多，只要与图片的相关的，大多都会用的上。
(1)、背景图片的导入：
当然大家最熟悉的当然是background与background-image了。为网页设计背景图片的代码是：
body{background:url("d:\images\04.jpg")}
或者
body{background-image:url("d:\images\04.jpg")}
这样的话，我们就能将想要作背景的图片导进网页里了。
(2)、背景图片的显示方式：
当然，只用上面的代码，是无法表达出自己想要的效果的。因为，图片小了，就会以平铺的
方式，如果是大了，为显示它，就是会出现滚动条，这样多不好。因此，我们还得多其进行显示控制，也就是要用到background-repeat，它是取值：
repeat:默认值。背景图像在纵向和横向上平铺
no-repeat:背景图像不平铺
repeat-x:背景图像仅在横向上平铺
repeat-y:背景图像仅在纵向上平铺
body{background:url("d:\images\04.jpg")}
或者
body{background-image:url("d:\images\04.jpg")}
这样的话，我们就能将想要作背景的图片导进网页里了。
(2)、背景图片的显示方式：
当然，只用上面的代码，是无法表达出自己想要的效果的。因为，图片小了，就会以平铺的
方式，如果是大了，为显示它，就是会出现滚动条，这样多不好。因此，我们还得多其进行显示控制，也就是要用到background-repeat，它是取值：
repeat:默认值。背景图像在纵向和横向上平铺
no-repeat:背景图像不平铺
repeat-x:背景图像仅在横向上平铺
repeat-y:背景图像仅在纵向上平铺
而代码，我想只要懂一点css的都知道，如下：
body{background:url("d:\images\04.jpg");background-repeat:no-repeat}这样的话，它就是以原图像大小显示了。
(3)、背景图片的大小控制：
不过问题是，倘若图片过大了，又怎么办呢？对于一个好网页来说，最好不要用太大的图片，原因上面也说过了，影响打开网页的速度。我们最好还是用ps或者Fireworks处理一下。不过既然我提到了，我们也不防用css来实现图片大小的控制。
我想很多人会自然而然的用上如下代码：
body{background-image:url("d:\images\04.jpg");width:350px;height:350px;}
呵呵，想法是好的，但你所用的浏览器支持吗？我想ie或者FF一定会当作没看见吧。也许你会问，我曾经设计论坛风格时，是可以实现的啊？我想，如果只是上面的代码的话，那是不可控制图片的，因为它只是控制body的大小。当然，这里也是控制不了的。如果是其它的id标记，我想是可以控制记标记的范围大小，呵呵，当然也就不是图像的大小了。
说实话，这个问题不仅困扰着你们，同时也困扰着我。因为它只是一个属性的值，而不是
body{background:url("d:\images\04.jpg");background-repeat:no-repeat}这样的话，它就是以原图像大小显示了。
(3)、背景图片的大小控制：
不过问题是，倘若图片过大了，又怎么办呢？对于一个好网页来说，最好不要用太大的图片，原因上面也说过了，影响打开网页的速度。我们最好还是用ps或者Fireworks处理一下。不过既然我提到了，我们也不防用css来实现图片大小的控制。
我想很多人会自然而然的用上如下代码：
body{background-image:url("d:\images\04.jpg");width:350px;height:350px;}
呵呵，想法是好的，但你所用的浏览器支持吗？我想ie或者FF一定会当作没看见吧。也许你会问，我曾经设计论坛风格时，是可以实现的啊？我想，如果只是上面的代码的话，那是不可控制图片的，因为它只是控制body的大小。当然，这里也是控制不了的。如果是其它的id标记，我想是可以控制记标记的范围大小，呵呵，当然也就不是图像的大小了。
说实话，这个问题不仅困扰着你们，同时也困扰着我。因为它只是一个属性的值，而不是
一个真正的对像。呵想到了用css控制的话，记得告诉我哦。
补充：w3c于9月10发布了一篇名为《cssbackgroundsandbordersmodulelevel3》的应文章，里面为css的背景加上了几个我们从未见的属性：background-clip：
background-origin：
background-size：背景尺寸。
background-break：
虽然是有了这些属性，不过现在还没有支持它们的浏览器。真是好苦恼啊。
(4)、背景图片的位置控制：
背景图片，我科是导进来了，但是它的位置真有一点无法让人接受。因为它默认的是左上对齐。但是我们却不想这样子放置，那我们又该怎么办呢。不要着急，激动人心的时刻马上到来，现在，让我们来认识一下background-position、background-position-x及background-position-y吧。
a.基本语法:
background-position:length||length
background-position:position||position
补充：w3c于9月10发布了一篇名为《cssbackgroundsandbordersmodulelevel3》的应文章，里面为css的背景加上了几个我们从未见的属性：background-clip：
background-origin：
background-size：背景尺寸。
background-break：
虽然是有了这些属性，不过现在还没有支持它们的浏览器。真是好苦恼啊。
(4)、背景图片的位置控制：
背景图片，我科是导进来了，但是它的位置真有一点无法让人接受。因为它默认的是左上对齐。但是我们却不想这样子放置，那我们又该怎么办呢。不要着急，激动人心的时刻马上到来，现在，让我们来认识一下background-position、background-position-x及background-position-y吧。
a.基本语法:
background-position:length||length
background-position:position||position
background-position-x:length|left|center|right
background-position-y:length|top|center|bottom
b.语法取值:
length:百分数|由浮点数字和单位标识符组成的长度值。
position:top|center|bottom|left|center|right
c.示例：
body{background-image:url("d:\images\04.jpg");background-position:50%50%;background-repeat:no-repeat;}/*设置双向坐标，这时相当于完全居中*/body{background-image:url("d:\images\04.jpg");background-position-x:50%;background-repeat:no-repeat;}/*设置双向坐标，这时相当于水平居中*/
body{background-image:url("d:\images\04.jpg");background-position-y:50%;background-repeat:no-repeat;}/*设置纵向坐标，这时相当于垂直居中*/对于取值为length|top|center|bottom我只写下面三个例子。
body{background-image:url("d:\images\04.jpg");background-position:topright;background-repeat:no-repeat;}/*设置双向坐标，这时相当于右上*/body{b
background-position-y:length|top|center|bottom
b.语法取值:
length:百分数|由浮点数字和单位标识符组成的长度值。
position:top|center|bottom|left|center|right
c.示例：
body{background-image:url("d:\images\04.jpg");background-position:50%50%;background-repeat:no-repeat;}/*设置双向坐标，这时相当于完全居中*/body{background-image:url("d:\images\04.jpg");background-position-x:50%;background-repeat:no-repeat;}/*设置双向坐标，这时相当于水平居中*/
body{background-image:url("d:\images\04.jpg");background-position-y:50%;background-repeat:no-repeat;}/*设置纵向坐标，这时相当于垂直居中*/对于取值为length|top|center|bottom我只写下面三个例子。
body{background-image:url("d:\images\04.jpg");background-position:topright;background-repeat:no-repeat;}/*设置双向坐标，这时相当于右上*/body{b
ackground-image:url("d:\images\04.jpg");background-position:50%center;background-repeat:no-repeat;}/*设置双向坐标，这时相当于中下*/body{background-image:url("d:\images\04.jpg");background-position:60pxcenter;background-repeat:no-repeat;}/*设置双向坐标，这时相当于距左60像素下*/
说了这么多例子，我想你对于定位，有一定的了解了吧。
(5)、背景图片的透明设置：
有的时候，我们总想着去将图片设置成透明的。
(6)、多幅背景图片的设置：
对于多幅背景图片的设置，我是在《超越css：web设计艺术精髓》里看到的。不过，却又让我很遗憾，因为，目前支持一个标签内有多幅背景图片的浏览器太小了，我知道的也只有applesafari。以许你会问，这怎么可能。当你看完这个实例之后，我想你会惊讶，“天啊，css3之前都只能给每个元素使用一幅图片。”如果想研究一下的话，就快快安装一个saFaRi浏览器吧。对我而言，我相信，这是发展的趋势。总之一句话，谁解释css能力越强，它就将是发展的潮流，谁俱有完美的web准标，谁就是明日浏览器之星。
代码如下：
说了这么多例子，我想你对于定位，有一定的了解了吧。
(5)、背景图片的透明设置：
有的时候，我们总想着去将图片设置成透明的。
(6)、多幅背景图片的设置：
对于多幅背景图片的设置，我是在《超越css：web设计艺术精髓》里看到的。不过，却又让我很遗憾，因为，目前支持一个标签内有多幅背景图片的浏览器太小了，我知道的也只有applesafari。以许你会问，这怎么可能。当你看完这个实例之后，我想你会惊讶，“天啊，css3之前都只能给每个元素使用一幅图片。”如果想研究一下的话，就快快安装一个saFaRi浏览器吧。对我而言，我相信，这是发展的趋势。总之一句话，谁解释css能力越强，它就将是发展的潮流，谁俱有完美的web准标，谁就是明日浏览器之星。
代码如下：
body{
background-image:
url("d:\mypic\001.png"),
url("d:\mypic\002.png");
url("d:\mypic\003.png");
url("d:\mypic\004.png");
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x,
repeat-y,
repeat-x,
repeat-y,
background-image:
url("d:\mypic\001.png"),
url("d:\mypic\002.png");
url("d:\mypic\003.png");
url("d:\mypic\004.png");
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x,
repeat-y,
repeat-x,
repeat-y,
background-position:
topleft,
topright,
bottomright,
bottomleft,
topleft,
topright,bottomright,bottomleft;}
topleft,
topright,
bottomright,
bottomleft,
topleft,
topright,bottomright,bottomleft;}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论