信息发布软件,b2b软件,广告发布软件

标题: 效果是做出来的JS代码也能让您实现透明可爱的效果的 [打印本页]
作者: 群发软件    时间: 2017-6-4 22:08
标题: 效果是做出来的JS代码也能让您实现透明可爱的效果的
本帖最后由 群发软件 于 2017-6-4 22:10 编辑

最近项目里需要实现这么个功能，类似网游中的聊天框，背景都是透明的，但是文字是不透明。所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的，会造成全部透明。

解决办法如下：
1.实现完全透明：
设置background为transparent即可，两个浏览器通用

2.实现透明度可调节：
要求改透明度，这里IE和非IE需要分开处理
非IE浏览器可通过支持CSS3的方式处理（不支持CSS3的这里忽略了），css的写法是
background-color:rgba(255,255,255,0.5)
前面3个参数是RGB，最后个是透明度
IE浏览器需要使用gradient滤镜，css写法是
filter: progidXImageTransform.Microsoft.gradient(startColorstr=#00ffffff,endColorstr=#00ffffff)
摘录CSS手册说明用法：
语法：
filter : progidXImageTransform.Microsoft.Gradient ( enabled= bEnabled , startColorStr= iWidth , endColorStr= iWidth )
属性：
enabled  :  可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true  :  默认值 。滤镜激活。
false  :  滤镜被禁止。
startColorStr  :  可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 – FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
取值范围为 #FF000000 – #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr  :  可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
特性：
Enabled  :  可读写。布尔值(Boolean)。参阅 enabled 属性。
GradientType  :  可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0 1  :  默认值 。水平渐变。
0  :  垂直渐变。
StartColorStr  :  可读写。字符串(String)。参阅 startColorStr 属性。
StartColor  :  可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 – 4294967295 。 0 为透明。 4294967295 为不透明白色。
EndColorStr  :  可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
EndColor  :  可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 – 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时，也可以用十六进制格式： 0xAARRGGBB 。
说明：
在对象的背景和内容之间显示定制的色彩层。
当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。
3. 补充完美支持IE6和IE7
这么写在IE7和IE6中会有点小问题，原因是使用transparent的背景时，鼠标居然能点到透明层后面的内容。。。还会造成部分事件的实效。解决办法是在外面套个div，然后给他加个完全透明的背景图（PNG），写法参考：



这样在里面被嵌套的div点击就不会点到最外面的内容了。当然非IE就不需要加这个了。
另外，对于不支持CSS3的浏览器，还有个解决办法就是把背景层和显示文字的层分开处理，放在同一级，只是通过位置上的调整做到看似有层级关系，这样使用透明效果就直接做也不会对文字有影响了。
补充：
IE6下，上述办法仍然无效，解决办法是套层iframe，在html代码里可以这么写：

<title>弹出提示</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 12px;
}
html, body {
height: 100%;
width: 100%;
}
#content {
background: #FFFFFF;
padding: 30px;
height: 100%;
}
#content a {
font-size: 30px;
color: #369;
font-weight: 700;
}
#alert { z-index:2;
border: 1px solid #369;
width: 300px;
height: 150px;
background: #e2ecf5;
z-index: 1000;
position: absolute;
display: none;
}
#alert h4 {
height: 20px;
background: #369;
color: #fff;
padding: 5px 0 0 5px;
}
#alert h4 span {
float: left;
}
#alert h4 span#close {
margin-left: 210px;
font-weight: 500;
cursor: pointer;
}
#alert p {
padding: 12px 0 0 30px;
}
#alert p input {
width: 120px;
margin-left: 20px;
}
#alert p input.myinp {
border: 1px solid #ccc;
height: 16px;
}
#alert p input.sub {
width: 60px;
margin-left: 30px;
}
#mask{ position:absolute; top:0; left:0; height:100%; width:100%; background:#000; opacity:0.3; display:none; z-index:1;}
</style>
</head>
<body>
<div id="content"> <a href="#">注册</a> </div>
<div id="alert">
<h4><span>现在注册</span><span id="close">关闭</span></h4>
<p>
<label> 用户名</label>
<input type="text" class="myinp" />
</p>
<p>
<label> 密　码</label>
<input type="password" class="myinp" />
</p>
<p>
<input type="submit" value="注册" class="sub" />
<input type="reset" value="重置" class="sub" />
</p>
</div>
<div id="mask"></div><!-- 遮罩层div-->
<script type="text/javascript">
var myAlert = document.getElementById("alert");
var myMask=document.getElementById('mask');
var reg = document.getElementById("content").getElementsByTagName("a")[0];
var mClose = document.getElementById("close");
reg.onclick = function()
{
myMask.style.display="block";
myAlert.style.display = "block";
myAlert.style.position = "absolute";
myAlert.style.top = "50%";
myAlert.style.left = "50%";
myAlert.style.marginTop = "-75px";
myAlert.style.marginLeft = "-150px";
document.body.style.overflow = "hidden";
}
mClose.onclick = function()
{
myAlert.style.display = "none";
myMask.style.display = "none";
}
</script>

原图：

点击按钮后的效果图：

代码部分：

源码：

<body style="background:pink">

    <form id="form1" runat="server">

   <span>JS自定义颜色透明效果</span>

        <div >

            <div id="div1" style="float:left; border:3px solid #99cc66;">

               <img src="1.png" style="width:450px; height:600px; "/>

           </div>


<input type="button" value="白色透明" style="cursor:pointer; background:#99cc66"

onClick="document.getElementById('div1').style.filter='Chroma(Color=white)';">

     </div>

    </form>

</body>




作者: nble002    时间: 2017-6-10 11:53
！设计人员专业！来回改动无数次，都全力配合更改！
作者: 枯干枯干    时间: 2017-6-14 04:47
慢学~
作者: xoxo110    时间: 2017-6-18 06:58
１８号和３３号，服务真好，不厌其烦地给我解决了很多问题，想说，在你们这里这网站，功能没得说，服务也没得说，想做不好都不可能。顺便说一下，这是我在这里做的第三个网站了。
作者: ctbvip    时间: 2017-6-21 22:57
模板是可以用的，功能也很丰富
作者: jh134724    时间: 2017-6-22 20:54
路过，学习下
作者: niubt    时间: 2017-6-24 19:03
务，网站也做得非常好，很满意
作者: yirenzhuang    时间: 2017-7-2 07:32
，服务好，大伙可以看看我的站
作者: meilifc001    时间: 2017-7-3 01:54
，方便实用，卖家很耐心回答问题，谢谢卖家



欢迎光临 信息发布软件,b2b软件,广告发布软件 (http://postbbs.com/) Powered by Discuz! X3.2