css-opacity attributes pits

• Look at a demo

	// html
	<div class="father">
		<div class="son" style="margin-left: 200px"></div>
	</div>
	
	// css
	div {
	  width: 100px;
	  height: 100px;
	  background-color: red;
	}
	.father {
	  opacity: 0;
	}
	.son {
	  opacity: 1;
	}

• I hope the child elements appear, but it hides, opacity: 1 did not seem to play a role
• After checking the documents, the child element of the parent element opacity opacity transparency is calculated on the basis of transparency come
• As parent element opacity is 0, then the child element is set to 1 even if the opacity, transparency of the final sub-element calculation result is 0 × 1 === 0
• So sub-elements remain transparent

Refer to the following solution

• Act One: From a structural transformation of the structure of parent-child for the brothers
• Method two: not used opacity, using css3 property RGBA () to set the transparency