"caja con transparencia obscura"
Bootstrap 3.0.0 Snippet by christiantigre

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="wrapper bgded" style="background-image:url('images/demo/backgrounds/01.png');"> <div id="pageintro" class="hoc clear"> <!-- ################################################################################################ --> <article> <div class="overlay trans"> <p class="font-xs nospace">Vivamus condimentum et mi quis</p> <h2 class="heading">Consequat curabitur massa</h2> <p>Pharetra vel leo nullam dictum ipsum eu molestie tincidunt nulla nunc pharetra nunc quis accumsan elit est id justo morbi et ullamcorper lectus ac fermentum enim habitant morbi tristique.</p> </div> <footer> <ul class="nospace inline pushright"> <li><a class="btn inverse" href="#">Consequat</a></li> <li><a class="btn" href="#">Scelerisque</a></li> </ul> </footer> </article> <!-- ################################################################################################ --> </div> </div> </div> </div>
body{ background-color: red; } .wrapper{display:block; width:100%; margin:0; padding:0; text-align:left; word-wrap:break-word;} .bgded{background-position:top center; background-repeat:no-repeat; background-size:cover;} .overlay{position:relative; z-index:1;} .overlay::after{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:""; z-index:-1;} .overlay{color:#FFFFFF; background-color:inherit;} .overlay::after{color:inherit; background-color:rgba(0,0,0,.55);} .trans{padding:30px;} .nospace{margin:0; padding:0; list-style:none;} #pageintro{padding:150px 0;} article{display:block; max-width:60%;} article .heading{margin-bottom:30px; font-size:42px;} article p:last-of-type{margin:0;}

Related: See More


Questions / Comments: