EverWeb Codebox

Transparency

Transparent Div

The HTML is shown below. The div is created using <div class="transparent-bg"></div> which contains an <h4>Heading Text</h4> heading and some paragraphs <p>Paragraph text...</p>

Container with a Transparent Background using CSS.

This div has a class “transparent”. The background color has been expressed as rgba with 0.5 opacity.

Use this style when floating text over a full size background image to make it easier to read yet still have the “presence” of the background.

This div can have any type of content.

The content needs to be inserted using HTML.

In most cases this would simply be text using an HTML heading and some paragraphs like this example.

This is a good prroject to get into some simple HTML and styling

HTML

<div class="transparent-bg">

<h4>Container with a Transparent Background using CSS.</h4>

<p>This div has a class “transparent”. The background color has been expressed as rgba with 0.5 opacity.</p>

<p>Use this style when floating text over a full size background image to make it easier to read yet still have the “presence” of the background.</p>

</div>

CSS

<style type="text/css">

.transparent-bg {

     width: 100%;

     height: 100%;

     margin: 0;

     padding: 0;

     background:rgba(0,0,0,0.5); /* Background */

     border: 2px solid #000; /* Border Style */

     border-radius: 15px; /* Border Radius */

     -webkit-border-radius: 15px;

}

.transparent-bg p {

     font: 16px 'Trebuchet MS', verdana, sans-serif;

     color: #ccc;

     margin: 10px;}

.transparent-bg h4 {

     font: 20px 'Trebuchet MS', verdana, sans-serif;

     color: #0593FF;

     margin: 10px;

     text-align: center;}

</style>

The styles are shown to the right...

The div is given a 100% width and height so that it can be adjusted by dragging the snippet box.

It has a styled border with radiused corners.

The background is stated like this...

background:rgba(0,0,0,0.5);

The first three numbers are the RGB slider settings and the last is the value for opacity which can be anywhere between 0 and 1 in 0.1 increments.

The other styles are for the h4 heading and the paragraph font-family, color, text align and inset margin.

Click the Easy button to see the widget for easily creating transparent backgrounds...

Easy