css实现背景拉伸

2016-02-19 18:54 3 1 收藏

有了下面这个css实现背景拉伸教程,不懂css实现背景拉伸的也能装懂了,赶紧get起来装逼一下吧!

【 tulaoshi.com - Web开发 】

制作页面时,有时需要在表格内插入背景图,而这种背景图片是渐变的,需要进行拉伸处理这个时候我们可以使用CSS进行控制

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

在css文件内定义

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

.left_table_middle {
MARGIN: 0px ; ;PADDING-RIGHT: 8px; PADDING-LEFT: 8px; MIN-HEIGHT: 10px; BACKGROUND: url(images/leftboxContentBg.jpg) #edf6fb repeat-x 0px 0px;   COLOR: #4d9ecf;
}

padding表示空白,可以设置为0 repeat-x 表示横向和纵向平铺

html代码为:

table width="200"     class="left_table_middle"
    
      tr
        td height="100" nbsp;/td
      /tr
     
    /table

来源:http://www.tulaoshi.com/n/20160219/1619466.html

延伸阅读
标签: Web开发
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。 CSS 在这方面的能力远远在 HTML 之上。 背景色 可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 这条规则把元素的背景设置为灰色: p {background-color: gray;} 如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内...
标签: Web开发
本教程介绍:1.如何仅显示一次背景图像,2.如何放置背景图像,3.如何使用%来定位背景图像。 参考网页教学网关于CSS背景的理论知识:。 1、如何仅显示一次背景图像 本例演示如何仅显示一次背景图像。 html head style type="text/css" body { background-image: url('/i/eg_bg_03.gif'); background-repeat: no-repeat } /style /...
标签: Web开发
本教程一共三个例子:1、如何重复背景图像;2、如何在垂直方向重复背景图像;3、如何在水平方向重复背景图像。 参考网页教学网关于CSS背景的理论知识:。 1、如何重复背景图像 本例演示如何重复背景图像。 html head style type="text/css" body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat } /style...
标签: Web开发
本CSS教程介绍:1.如何使用像素来定位背景图像,2.如何设置固定的背景图像,3.所有背景属性在一个声明之中。 参考网页教学网关于CSS背景的理论知识:。 1、如何使用像素来定位背景图像 本例演示如何使用像素来在页面上定位背景图像。 html head style type="text/css" body { background-image: url('/i/eg_bg_03.gif'); backg...
标签: Web开发
今天萌发一个想法,用css来实现透视效果。起初,我想到的是我们常见的添加阴影效果的方法,用多个div通过偏移来实现,但这需要很多 div,不够理想。随后,我想到css的一个属性:border,在border相连接处可以产生对角线效果。这样用两个div就可以实现,我们先看看,然后再分析实现过程。 首先,我们看看border如何生成的对角线效果,在你的...

经验教程

518

收藏

58
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部