CSS控制图片、表格、背景颜色渐变示例

CSS Filter 是 IE 特有的技术,其他浏览器均不支持,所以为了最大的兼容性及标准化,应尽量避免为 IE 单独使用 Filter,如需要其某些特效,应同时考虑其他浏览器,
图片渐变
 

复制代码
代码如下:

<img src="..." width=400 height=300 style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100)">

表格渐变

复制代码
代码如下:

<table style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=0,finishY=100); BACKGROUND-COLOR: #ff0000">
<tr><td>12345678901234567890</td></tr></table>

背景渐变

复制代码
代码如下:

.bgjb{
background:-webkit-gradient(linear,left,right,from(#BDD4FD) ,to(#FFFFFF));
background:-moz-linear-gradient(left,#BDD4FD,#FFFFFF,);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BDD4FD, endColorstr=#FFFFFF,GradientType=1 );
}/*同时考虑其他浏览器,
<div class="bgjb"></div>
<body style="FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); BACKGROUND-COLOR: skyblue">
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" >
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"
style="FILTER: progid:DXImageTransform.Microsoft.Gradient
(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" >
<div style="width:66;height:100%;float:left;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#46B5FF,endColorStr=#ffffff)"></div>
<div style="width:66;height:100%;float:left;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#ffffFF,endColorStr=#46B5FF)"></div>
<div style="width:66;height:100%;float:right;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#ffffff,endColorStr=#46B5FF)"></div>
<div style="width:66;height:100%;float:right;FILTER:
progid:DXImageTransform.Microsoft.Gradient
(gradientType=1,startColorStr=#46B5FF,endColorStr=#ffffff)"></div>

若要使表格里面的元素不受影响
给里面的元素加上style="position:relative;"属性, 这样就不受影响了例如:

复制代码
代码如下:

[html]
<div style="width:200px;height:200px;filter: Alpha(opacity=10);background-color:red;">
<div style="position:relative;">123123</div>
</div>
[/html]

时间: 2024-10-30 05:10:18

CSS控制图片、表格、背景颜色渐变示例的相关文章

用CSS实现表格背景颜色渐变效果

css|渐变 怎么样用CSS实现表格背景颜色的渐变效果呢,请看下面的例子: <style>td{text-align:center;color:white;font-family:宋体;font-size:14px;}table{table-layout:fixed;border:1 dashed blue;width:567;height:234;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#FFFF0000

Android特效专辑(二)——ViewPager渲染背景颜色渐变(引导页)

Android特效专辑(二)--ViewPager渲染背景颜色渐变(引导页) 首页:http://blog.csdn.net/qq_26787115/article/details/50439020 首页里面也提到过,自己有意做一款杂七杂八的APP,就是自己喜欢什么就加上面,现在本文说的是引导页,我找了很久才觉得可以的开源项目,自己做了一下修改 开源地址:https://github.com/TaurusXi/GuideBackgroundColorAnimation 先来看看效果图吧! 图片用

CSS控制图片代码:让网页图片自适应大小

文章简介:CSS控制图片代码:让网页图片自适应大小. 图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了.我们看下面的代码: div img { max-width:600px; width:600px; width:expression(document.body.clientWidth>600

用CSS控制图片自适应大小的方法

css|控制|自适应 网页制作技巧实例解决:用CSS控制图片自适应大小 图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了.我们看下面的代码: div img { max-width:600px; width:600px; width:expression(document.body.client

JS控制图片等比例缩放的示例代码

 本篇文章主要是对JS控制图片等比例缩放的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <SCRIPT language="JavaScript"> function DrawImage(ImgD,FitWidth,FitHeight){        var image=new Image();        image.src=ImgD.src;        if(image.width>0 && image.he

在SWT中用这种方式重画的动态图片,为什么设定不了图片的背景颜色呢?

问题描述 在SWT中用这种方式重画的动态图片,为什么设定不了图片的背景颜色呢? 在SWT中插入的动态等待图片,设定的dg背景色,画的时候无效,这是为什么呢?求高手相助~** package test; import org.eclipse.swt.SWT; import org.eclipse.swt.graphics.Color; import org.eclipse.swt.graphics.GC; import org.eclipse.swt.graphics.Image; import

CSS控制图片大小-适应宽度_经验交流

不知道家有没有遇到过这样的情况:在CSS控制图片大小时,如果把图片的宽度写死,比如 img{width:500px;} ,固然,如果图片宽度大于500px可以很好的控制它不让它过大,但如果图片宽度小于500px,比如说只有100px时,刚才的写法会把这张图扩大5倍显示,显然,这不是我们想看到的.     那么,CSS如何可以区分对待这些图片设置大小呢?很简单,请看:  复制代码 代码如下: img{width:expression(this.width>500?"500px":t

如何用CSS控制图片自适应大小?

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了.我们看下面的代码:  代码如下 复制代码 div img {  max-width:600px;  width:600px;  width:expression(document.body.clientWidth>600?"600px&qu

CSS控制图片使它自适应大小代码

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 下面就为你提供两种方法,我个人推荐第一种方法 方法一 CSS控制图片大小代码 <style type="text/css"> img { border:0; margin:0; padding:0; max-width:200px; width:expression(this.width>200?"200px