css实现父div透明子div内容不透明

久伴
久伴
久伴
643
文章
535
评论
2019年5月3日17:20:54 1 1,159 845字阅读2分49秒

标题可能不是很专业,只要你有一点前端基础的应该能看懂意思,昨天没休息好,今天写项目有点飘,总是写了尾巴忘了头,年轻少熬夜*-*

如标题今天记录三个Css属性

opacity rgb rgba

下面来讲解一下久伴遇到的坑,由于久伴是前端小白,项目经验不多,在写一个demo的时候遇到一个问题,如图所示

父div透明了,但是父div中的子div也继承了opacity透明属性,这可不是久伴要的效果 css实现父div透明子div内容不透明

解决方案

父div使用rgba()Css属性即可解决这个问题,因为rgba()属性用在父div上面不会被子div继承 css实现父div透明子div内容不透明

opacity rab rgba属性解释

1,opacity设置颜色透明度

2,rgb(,,,)设置颜色r代表red,g代表green,b代表blue(取值在0-255之间)

3,rgba(,,,,)设置颜色r代表red,g代表green,b代表blue a代表opacity设置背景透明度(取值在0-1之间)

其实用opacity也可以设置背景透明文字不透明,这个需要使用定位(如果用定位请考虑好大局,不然代码多了你很难受的)

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		body{
			background: red;
		}
		.diva{
			width: 200px;
			height: 200px;
			background: #ffffff;
			opacity: 0.5;

		}
		.divb{
			width: 200px;
			height: 200px; 
			position: absolute;
			top: 0;
			left: 0;
			text-align: center;
			line-height: 200px;
		}
	</style>
</head>
<body>
<div class="diva">
	
</div>
<div class="divb">
	我是文字
</div>
</body>
</html>

css实现父div透明子div内容不透明

使用场景

opacity可用于图片遮罩,rgba用于背景透明文字不透明

继续阅读
久伴
适合介绍项目流程前端界面 前端作品

适合介绍项目流程前端界面

其实这个界面还没完全写完,跟电影一样来个预告,不过如标题所意,介绍项目是没问题的&&不过界面不算原创,但是代码是原创的 界面截图 在线演示 http://demo.jiubx.com/xiangmu/...
网站背景潮流,我们确定跟风吗? HTML+CSS

网站背景潮流,我们确定跟风吗?

前言久伴看到好多网站都有一个网页背景,然后久伴也想跟随一下网站界的潮流,试了一下背景,总结以下几点 我的结论 既然有网页背景这个潮流词汇,那么网页背景肯定是可行的方案,但不是所有站点都能hou的住的 ...
网站美化:CSS3自定义修改浏览器滚动条 wordpress教程

网站美化:CSS3自定义修改浏览器滚动条

前天看到了某网站(整站特效做得真的好)的自定义滚动条样式,也忍不住想要改变网站的滚动条样式,给闲鱼博客也来了一下。改动之后果然还是有点效果的,网站整体风格会更融合、更高端,其实修改真的很简单,不过展示...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • 楚狂人 楚狂人 1

      不错的分享,谢谢