CSS设置背景颜色透明的两种方法实例详解
<p>在css中设置背景颜色透明的方法有两种： <strong>一种是通过rgba方法设置，另一种是通过backgroundh和opacity设置</strong></p><p>下面分别是css中 两种方法实现的背景颜色透明实例 </p>
<h2>1，通过background和opacity设置背景颜色透明</h2>
<p>background属性中属性值比较简单，所以我们简单看看opacity属性</p>
<p><strong>opacity属性参数的“不透明度”是以数字表示，从0.0至1.0都可以，完全透明是0.0，完全不透明是1.0，换句话说，数字越大越不透明。</strong>参数除了可以使用＂不透明度＂之外，还有 inherit 继承父层属性，不过浏览器支援度较差，不建议使用。</p>
<p>通过backgroud和opacity设置背景颜色透明度的具体实例 代码如下：</p>
<div class="jb51code"><pre class="brush:css;"><div style="width: 200px;height: 200px;Object-fit : contain">
<p class="pp" >哈哈哈哈哈哈</p>
<img src="../images/d.png"/>
</div></pre></div>
<div class="jb51code"><pre class="brush:css;"> .pp{
width: 200px;
position: absolute;
color: white;
font-size: 18px;
background-color: #550000;
/* opacity: 0.2; */
}</pre></div>
<p>这是未添加opacity属性：</p>
<p style="text-align:center"><img alt="" height="305" src="https://img.jbzj.com/file_images/article/202308/2023080716073145.png" width="365" /></p>
<p>这里是通过background和opacity设置背景透明度，但是上面有文字的话，文字也会变成透明，就下面效果。</p>
<p style="text-align:center"><img alt="" height="305" src="https://img.jbzj.com/file_images/article/202308/2023080716073146.png" width="361" /></p>
<p>所以，看个人需求使用哪种方法才是自己想要的效果。</p>
<h2>2，通过rgba方式设置背景色透明</h2>
<p>所谓rgba颜色，就是rgba三原色加alpha。在给背景添加颜色的同时，提供透明度特性。</p>
<p>用法：background:rgba(R,G, B, A);</p>
<p>下面我们就来看通过rgba方式设置背景颜色透明度的具体实例：</p>
<div class="jb51code"><pre class="brush:css;"><div style="width: 200px;height: 200px;Object-fit : contain">
<p class="pp" >哈哈哈哈哈哈</p>
<img src="../images/d.png"/>
</div></pre></div>
<div class="jb51code"><pre class="brush:css;"> .pp{
width: 200px;
position: absolute;
color: white;
font-size: 18px;
background-color: rgb(85 0 0 / 46%);
/* background-color: #550000; */
}</pre></div>
<p>rgba方式设置背景颜色透明度效果前后对比如下：</p>
<p style="text-align:center"><img alt="" height="305" src="https://img.jbzj.com/file_images/article/202308/2023080716073145.png" width="365" /></p>
<p style="text-align:center"><img alt="" height="306" src="https://img.jbzj.com/file_images/article/202308/2023080716073147.png" width="369" /></p>
<p> <strong>说明：</strong>通过rgba方式设置背景颜色透明度，可以设置背景颜色透明而文字不透明，但是这种方法的兼容性不好，不兼容ie浏览器。</p>
頁:
[1]