前端页面,给div标签设置透明度

近段时间在学习使用一些前端的知识,在使用一些开源的前端开源特效的时候,发现网页特效被前端的div块儿所遮挡。
  代码如下:

 <div class="jumbotron" style="margin: 100;">
			<div class="container" align="center">
				<h2 class="text-info" style="font-family:宋体;font-weight:bold;font-size:49px">服务范围</h2>
				<br>
				<div class="text-muted">各项服务介绍</div>
				<br>
				<br>
				<p>
					<a role="button" href="#" class="btn btn-success">进入专区</a>
				</p>
			</div>
		</div>

效果如下:
  这里写图片描述
  经过查阅网上资料,发现只要在标签中使用background-color: rgba(R,G,B,透明度)设置就行了。前三项数据是RGB,设置颜色的,一般使用0,0,0白色好,最后一项属性对应的透明度,取值在(01)之间,对应(0%100%);
  例如我对上述代码使用了透明度设置(对外层div块进行设置):
  ```
 



·····略

效果如下图:
这里写图片描述
图中的小点点就是我添加的一个开源粒子特效,可以跟随鼠标连接附近的小点。
我把透明度设置为了0.01,即对应1%的透明度,可以看到明显变化,特效正常的显示出来了。

所以给前端标签设置透明度用:background-color: rgba(0,0,0,0.1)就行啦。

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值