如何实现背景/背景图片透明文字不透明

第一种情况，背景为自定义颜色

直接给父级背景颜色设置background:rgba();就可以了；

<!-- 第一种情况 背景是自定义颜色系列 -->
		<div class="container">
			<div class="bg">
				<div class="form">
					<div class="formItem">
						<label for="">用户名：</label>
						<input class="input" type="text">
					</div>
					<div class="formItem">
						<label for="">密码：</label>
						<input class="input" type="text">
					</div>
					<div class="formItem">
						<button class="btn">按钮</button>
					</div>
				</div>
			</div>
		</div>
``

```css
/* 第一种情况适用 */
.container {
	width: 800px;
	height: 500px;
	background: url('../img/bg.jpg') no-repeat center;
	background-size: cover;
	position: relative;
}

.container .bg {
	position: absolute;
	right: 50%;
	top: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	margin-right: -100px;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 10px 10px 5px #888888;
	background-color: rgba(0, 229, 238, 0.5);
}

.container .bg .form {
	width: 160px;
	height: 160px;
	color: #FFFFFF;
	padding: 20px 20px;
}

.container .bg .form .formItem {
	margin: 10px 0;
}

.container .bg .form .formItem .btn {
	width: 160px;
	height: 20px;
	background-color: #0000FF;
	margin-top: 40px;
}

.container .bg .form .formItem .input {
	width: 160px;
	border: 0px;
}

效果：

第二种情况，背景为图片

将背景和表单设置成兄弟块，通过定位将两者重合，再将背景用opacity透明化，表单不添加背景即可；

<!-- 第二种情况 图片作为背景 -->
		<div class="container">
			<div class="bg2"></div>
			<div class="form2">
				<div class="formItem">
					<label for="">用户名：</label>
					<input class="input" type="text">
				</div>
				<div class="formItem">
					<label for="">密码：</label>
					<input class="input" type="text">
				</div>
				<div class="formItem">
					<button class="btn">按钮</button>
				</div>
			</div>
		</div>

/* 第二种情况适用 */
.container .bg2 {
	position: absolute;
	/* right: 50%; */
	right: 5%;
	top: 50%;
	width: 200px;
	height: 200px;
	margin-top: -100px;
	/* margin-right: -100px; */
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 10px 10px 5px #888888;
	background: url('../img/avator-1.jpg') no-repeat center;
	background-size: cover;
	opacity: 0.7;
}

.container .form2 {
	position: absolute;
	/* right: 50%; */
	right: 5%;
	top: 50%;
	width: 160px;
	height: 160px;
	margin-top: -100px;
	/* margin-right: -100px; */
	color: #000000;
	padding: 20px 20px;
}

.container .form2 .formItem {
	margin: 10px 0;
}

.container .form2 .formItem .btn {
	width: 160px;
	height: 20px;
	background-color: #00ff00;
	margin-top: 40px;
}

.container .form2 .formItem .input {
	width: 160px;
	border: 0px;
}

效果：

总结：

opacity:影响内部所有元素的显示问题；
rgba():影响内部文本显示，但不影响内部块显示；