web前端背景图片透明度,web前端背景图片透明度怎么调
网页背景的透明度怎么调节?
CSS样式表里面的阿尔法通道。
在/head之前一行插入
style type=\"text/css\"
.tabbg{filter:alpha(opacity=透明度);}
/style
透明度数值1~100之间
然后有背景的表格table ....添加table ..... class=tabbg即可,注意这个做法是整个表格包括文字也有想同透明度,如果只是要背景图片透明则需要将表格和图片放到不同层里面互不干扰才行。
网页中怎么设置图片透明度
一般是用CSS里的Alpha透明度进行设置的。先请看如下代码:
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/
简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。
从上面的代码中你没有看到Opera。没错,Opera还未支持标准的opacity,也没有其私有的可支持Alpha透明的属性。
但是,Opera是支持Alpha透明的PNG图片的(当然Moz Family也支持)。所以我们可以使用背景图片来实现Alpha透明效果。
Dreamweaver 8中 网页背景图片怎么设置透明度?
(1):“Opacity”代表透明度水准,范围是0---100,其实就是百分比的意思,如果你想变为全透明,那么就用0代替Opacity后面的问号吧。
(2):“FinishOpacity”就是用来指定结束时的透明度,范围跟Opacity一样(FinishOpacity为可选参数,不想要的话就去掉它吧。
(3):“Style”是指定透明区域的形状特征,0代表统一形状,1代表线形,2代表放射形,3代表长方形。比如我们一般可以写成Style=1。
(4)“startX”与”startY”就是代表渐变效果开始的X与Y坐标,(坐标应该知道是什么吧)一般我们设置为StartX=0, StartY=0(这样就是表示的透明效果是从图片的左上角开始的。)
(5)“FinishX”与“FinishY”当然,这个就是代表渐变效果结束时的横纵坐标了,这里很关键,填什么数值那就要看你的图片的高与宽了,假设我们的图片高与宽分别是100、200像素,那么就可以写成FinishX=200, FinishY=100。(如果你只想要一半的面积是透明,那么可以设置成FinishX=100, FinishY=50)
给下面一个完整代码的给你们参考:(下面的数值我是假设图片高与宽分别是100、200像素)
Alpha(Opacity=25, FinishOpacity=50, Style=1, StartX=0, StartY=1, FinishX=200, FinishY=100)
4:ok,这时候你应该做的是把你想要的数值把那些讨厌的问号替换掉,设置好这些参数后,就点击ok。设置的步骤到此就算完成了,但设置完了不代表我们就做完了,我们还要把这个效果赋予图片呢。下面介绍如何使用的步骤。
1:在Dreamweaver 4插入一图,假设高为100,宽为200单位是像素(为了能看到效果,我们可以把网页的背景设为红色等鲜明的色彩。
2:再次调出css styles窗口(参见设置步骤1)
3:在css styles窗口中,应该有个clarity,如图指明处:
4:在Dreamweaver 4选中你插入的图。
5:用鼠标单击上图3的指明处。
6:大功告成,你可以按键盘的f12来预览了(注意,这种特效在编辑状态下是不可见的,一定要预览才可见。
HTML如何给背景颜色设置透明度
html给背景图片设置透明度的方法有2种
1、使用opacity属性,给设置背景图片的元素添加“opacity:透明度值;”样式即可;
属性值从 0.0 到 1.0。值越小,越透明
示例:
!DOCTYPE html
html
head
style type="text/css"
div {
width: 300px;
height: 300px;
background-image: url(img/3.jpg);
}
.box{
opacity: 0.5;
}
/style
/head
body
div背景图片/div
div class="box"背景图片/div
/body
/html
2、使用filter属性,给设置背景图片的元素添加“filter: opacity(透明度值);”样式即可
filter属性定义了元素(通常是)的可视效果(例如:模糊与饱和度);
2.1 语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
属性值代表的意义:
grayscale灰度
sepia褐色(有种复古的旧照片感觉)
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影
示例:
!DOCTYPE html
html
head
style type="text/css"
div {
width: 300px;
height: 300px;
background-image: url(img/3.jpg);
}
.box{
filter: opacity(0.6);
}
/style
/head
body
div背景图片/div
div class="box"背景图片/div
/body
/html