Ändern einer bestimmten div Opazität ändert die ganze Tags in ihm

Question

Ich habe ein Problem mit meinem CSS-Blatt, Ich habe ein Hintergrundbild und ein Formular in der Mitte des Bildes Ich wickelte das Formular in einem Div "Box" und gab es eine Hintergrundfarbe der Form eleganter und sichtbar .. alles funktionierte sehr aber ich habe ein kleines Problem , wenn ich die Deckkraft des div „Box“ auf 0,5 die ganze Form nimmt die gleiche Opazität

zu machen

Hier ist meine CSS-Stil

body 
{ 
padding-top: 60px; 
padding-bottom: 40px; 
background: url('/images/university.jpg') #f2f2f2 no-repeat left top; 
} 
legend 
{ 
font-size: 2em; 
} 
form 
{ 
opacity: 1 !important; 
} 
.Box 
{ 
margin-top: 10%; 
margin-bottom: 20px; 
padding: 10px 20px; 
border: 1px #c0c0c0 solid; 
background-color: white; 
border-radius: 25px; 
zoom: 1; 
filter: alpha(opacity=50); 
opacity: 0.5; 
} 

Hier ist meine HTML-Seite „i Laravel Klinge bin mit Motor“

@extends('design') 

@include('partials._nav') 

@section('middle') 

<div class="Box"> 

{!! Form::open() !!} 

<fieldset> 

<legend>Create Account :</legend> 

<div class="form-group"> 
{!! Form::text('Username', null, ['class'=>'form-control', 'placeholder'=>'Username']) !!} 
</div><!-- /form-group --> 

<div class="form-group"> 
{!! Form::password('password', ['class'=>'form-control', 'placeholder'=>'Password']) !!} 
</div><!-- /form-group --> 

<div class="form-group"> 
{!! Form::password('psw', ['class'=>'form-control', 'placeholder'=>'Re-type Password']) !!} 
</div><!-- /form-group --> 

<div class="form-group"> 
{!! Form::submit('Create Account', ['class'=>'form-control btn btn-  primary']) !!} 
</div><!-- /form-group --> 

</fieldset> 

{!! Form::close() !!} 

</div> 

@stop 

Hilfe Bitte ...

Answer 1

Opazität ist standardmäßig von allen Kindern in den übergeordneten Container vererbt.

Was können Sie tun, ist

• Ihr Bild machen semi-transparent, sich mit einem Editor.
• fügen Sie ein div neben den Kindern hinzu, fügen Sie Hintergrund hinzu und nachdem Sie es halbtransparent gemacht haben, positionieren Sie es hinter den erwähnten Kindern.

So etwas wie

div { 
    width: ###px; 
    height: ###px; 
    display: block; 
    position: relative; 
} 

div::after { 
    content: ""; 
    background: url(image.jpg); 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}