标签并添加一个类，在这把这个类设置为：rgba。 如图
（3）为div添加样式。在
标签后面创建一个<style>，在<style>标签里设置rgba类的高和背景透明度的样式（rgba(R,G,B,A)）。透明度参数，取值在0~1之间，不可为负值，透明度参数越小透明度越高。如图</p>
<p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fd31b0ef41bd5ad6e414a7e358acb39dbb7fd3cb9%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/d31b0ef41bd5ad6e414a7e358acb39dbb7fd3cb9"></p>
<p>（4）保存后使用浏览器查看。可以看到当透明度为由0.1修改为1时div背景由灰色变为了黑色。如图：</p>
<p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2Fa6efce1b9d16fdfafadedc31bf8f8c5495ee7bba%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/a6efce1b9d16fdfafadedc31bf8f8c5495ee7bba"></p>
<p>（5）所有代码。可以把所有代码复制到新建的html文件上，保存好后使用浏览器打开借口看到效果。如图</p>
<p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F2f738bd4b31c870178e1a8392c7f9e2f0608ff9e%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/2f738bd4b31c870178e1a8392c7f9e2f0608ff9e"></p>
</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="wdhdnr">
<div class="huidanrtop">
<div class="wdhuidaxinx">
<div class="wdhuidaxm">回答2：</div>
</div>
</div>
<div class="clear"></div>
<div class="wdhuidanrmid">
<div class="zuijiacont">
<p><p><strong>问题分析：</strong></p>
<p>HTML的标签可以使用CSS的background-color来设置背景颜色以及透明度。</p>
<p><strong>举例如下：</strong></p>
<blockquote><p>以下示例将分别演示不透明、50%透明度以及20%透明度的三种不同效果。</p></blockquote>
<p><strong>HTML代码：</strong></p>
<pre t="code" l="html"><div id="test-1"><br> 我是黑色背景，不透明的。<br></div><br><div id="test-2"><br> 我是黑色背景，50%透明度。<br></div><br><div id="test-3"><br> 我是黑色背景，20%透明度。<br></div></pre>
<p><strong>CSS代码：</strong></p>
<pre t="code" l="css">#test-1, #test-2, #test-3{<br> width: 300px;<br> height: 200px;<br> line-height: 200px;<br> text-align: center;<br> display: inline-block;<br> margin-left: 50px;<br> color: #FFF;<br>}<br>#test-1{<br> background-color: rgba(0,0,0,1);<br>}<br>#test-2{<br> background-color: rgba(0,0,0,0.5);<br>}<br>#test-3{<br> background-color: rgba(0,0,0,0.2);<br>}</pre>
<p><strong>页面初始化效果：</strong></p>
<p></p>
<p><img loading="lazy" class="ikqb_img" src="/picurl?url=https%3A%2F%2Fiknow-pic.cdn.bcebos.com%2F37d3d539b6003af36ac1eb6c3f2ac65c1038b646%3Fx-bce-process%3Dimage%252Fresize%252Cm_lfit%252Cw_600%252Ch_800%252Climit_1%252Fquality%252Cq_85%252Fformat%252Cf_auto" esrc="https://iknow-pic.cdn.bcebos.com/37d3d539b6003af36ac1eb6c3f2ac65c1038b646"></p></p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="wdhdnr">
<div class="huidanrtop">
<div class="wdhuidaxinx">
<div class="wdhuidaxm">回答3：</div>
</div>
</div>
<div class="clear"></div>
<div class="wdhuidanrmid">
<div class="zuijiacont">
<p>/*给div背景颜色控制透明度，同时给div背景图片样式*/ -------------------------------------------------------------------<br>.div {background: rgba(137, 42, 126, 1) url(../images/cd-top-arrow.svg) no-repeat center 50%;}</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="wdhdnr">
<div class="huidanrtop">
<div class="wdhuidaxinx">
<div class="wdhuidaxm">回答4：</div>
</div>
</div>
<div class="clear"></div>
<div class="wdhuidanrmid">
<div class="zuijiacont">
<p>给html元素设置样式：<br>backgound:#颜色值；<br>标准浏览器：opacity:0~1之间的值；<br>ie 浏览器：filter:alpha(opacity=1~100之间的值);<br>一般两个样式都写上就好</p>
</div>
</div>
<div class="clear"></div>
</div>
<div class="wdhdnr">
<div class="huidanrtop">
<div class="wdhuidaxinx">
<div class="wdhuidaxm">回答5：</div>
</div>
</div>
<div class="clear"></div>
<div class="wdhuidanrmid">
<div class="zuijiacont">
<p>支持rgba的话<br> background: rgba(0, 0, 0, .5);<br>IE<br> filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7f000000', endColorstr='#7f000000');</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="wendaright">
<div class="wdluluerwema">
<div class="wdxgwttop">相关问答</div>
<div class="wdxgwtnr">
</div>
<div class="clear"></div>
</div>
<!-- 其他随机问答['id'=>alphaID($like['zid'])] -->
<div class="wdluluerwema">
<div class="wdxgwttop">最新问答</div>
<div class="wdxgwtnr">
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.51a.net/2204300921584344828.html">努比亚z7mini怎么设置主页</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.51a.net/406815760.html">冒险岛弓箭手属性加点</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.51a.net/1247292871819049619.html">为什么很多人说，价值投资是普通人能在股市赚钱的唯一方法？</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.51a.net/267819053961099765.html">友情链接 传统制作业的网站怎样做交换友情链接</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.51a.net/246134809.html">金士顿u盘 芯片制造商: Chipsbank(芯邦) 芯片型号: CBM2095 用量产工具，说是坏块多，无法完整量产。</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.51a.net/304114414.html">小弟想再十一的时候和女朋友另外加两个兄弟，去趟厦门旅游，大约3天左右，小弟想请问各位大哥大姐们</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.51a.net/280286180.html">感情骗子</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.51a.net/225237058.html">photoshop 这样的字体是什么字体，或者说怎么样做出这个效果样</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.51a.net/321449729.html">请问陕西师范大学的研究生有设人力资源管理专业吗？我本科不是学人力的，现在想跨专业</a></div>
</div>
<div class="wdxgwtcont">
<div class="wdxgtitle"><a href="https://www.51a.net/1739339287100366587.html">现代农业 现代化农业和农业现代化三者的区别和联系</a></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer">
<!-- 移动底部导航 -->
<div class="fanhuitop"><a href="#top" ref="nofollow"><img src="https://www.51a.net/static/old/img/fhtop.png" alt="返回顶部" title="返回顶部"></a></div>
<div class="dibu">
<div class="dibu">
</div>
</div>
<div class="banquan">
<p>内容全部来源于网络收集，如有侵权，请联系网站删除：QQ：24596024</p>
</div>
</div>
</div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?aa60e2f779ee696abd6a207eac06903d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
