其实很简单,你将该图片简便区域切宽度为1像素的一小竖条就够了,然后在该表格框内定义样式:
style="height:所切背景图片高度background:url(该图的路径) repeat-x“
即可 也就是定义一个高度跟该简便图片一样高的<td>然后给它添加背景图片,然后横向平铺过去;
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:
div {width: 200pxheight: 150pxbackground: linear-gradient(red, white)}
3、浏览器运行index.html页面,此时td中的div的背景颜色从红色到白色渐变。
/*上下线性渐变(兼容IE10及以上)*/background:-webkit-linear-gradient(#fff,#000)/*兼容webkit内核,比如Chrome*/
background:-moz-linear-gradient(#fff,#000)/*兼容老火狐浏览器*/
background:-o-linear-gradient(#fff,#000)/*兼容老欧朋Opera浏览器*/
background:linear-gradient(#fff,#000)/*适用于所有新版本浏览器*/
/*左右线性渐变(兼容IE10及以上,第一个值是left或right)*/
background:-webkit-linear-gradient(left,#fff,#000)/*兼容webkit内核,比如Chrome*/
background:-moz-linear-gradient(left,#fff,#000)/*兼容老火狐浏览器*/
background:-o-linear-gradient(left,#fff,#000)/*兼容老欧朋Opera浏览器*/
background:linear-gradient(left,#fff,#000)/*适用于所有新版本浏览器*/
/*兼容IE6-9渐变(只适用于线性渐变,参数enabled:true表示激活滤镜,false表示不激活;gradientType:0表示上下渐变,1表示左右渐变;startColorStr:起始渐变值,可以是#ffffff形式也可以是#ffffffff形式,此形式前两位表示透明度;endColorStr:结束渐变值,可以是#000000形式也可以是#ff000000形式,此形式前两位表示透明度。)*/
filter:progid:DXImageTransform.Microsoft.Gradient(enabled='true',gradientType=0,startColorStr='#ffffff',endColorStr='#000000')
/*径向渐变(兼容IE10及以上)*/
background:-webkit-radial-gradient(#f00,#0f0,#00f)/*兼容webkit内核,比如Chrome*/
background:-moz-radial-gradient(#f00,#0f0,#00f)/*兼容老火狐浏览器*/
background:-o-radial-gradient(#f00,#0f0,#00f)/*兼容老欧朋Opera浏览器*/
background:radial-gradient(#f00,#0f0,#00f)/*适用于所有新版本浏览器*/
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)