Opacitet (opacity) utan att innehållet blir transparent

Box 1

För att texten inte ska bli transparent används tre boxar. Se hela koden längst ned på sidan.

<div id="box1_container">
<div id="box1">
</div>
<div id="box1_text">
<p> Textinnehåll här.</p>
</div>
</div>

Box 2

För att texten inte ska bli transparent används tre boxar. Se hela koden längst ned på sidan.

<div id="box2_container">
<div id="box2">
</div>
<div id="box2_text">
<p> Textinnehåll här.</p>
</div>
</div>

Box 3

För att texten inte ska bli transparent används tre boxar. Se hela koden längst ned på sidan.

<div id="box3_container">
<div id="box3">
</div>
<div id="box3_text">
<p> Textinnehåll här.</p>
</div>
</div>

Box 4

För att texten inte ska bli transparent används tre boxar. Se hela koden längst ned på sidan.

<div id="box4_container">
<div id="box4">
</div>
<div id="box4_text">
<p> Textinnehåll här.</p>
</div>
</div>

CSS-kod:

#box_container {
width: 300px;
height: 450px;
float: left;
clear: both;
}

#box {
position: relative;
width: 300px;
height: 340px;
float: left;
margin: 35px;
padding: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0, 0.4);
background-color: #fff;
opacity: 0.3;
}

#box_text {
position: absolute;
width: 300px;
height: 340px;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
}

HTML-kod:

<div id="box_container">

<div id="box">
</div>

<div id="box_text">
<p> Textinnehåll här.</p>
</div>

</div>