How do I create a semi-transparent rectangle or box with html?

  • 0
  • 1
  • Question
  • Updated 6 years ago
  • Answered
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: • We have archived this topic as it has either reached a resolution or has become inactive.  If you believe this topic should not have been archived, please let us know, and we would be happy to review it.  You may continue to access this topic as needed

How do I create a semi-transparent rectangle or box with html?
Photo of Victor4384

Victor4384

  • 1,282 Points 1k badge 2x thumb

Posted 6 years ago

  • 0
  • 1
Photo of Victor4384

Victor4384

  • 1,282 Points 1k badge 2x thumb
Never mind.  I actually found a good clue from reading through the forums and created a little html snipit that I got from                                 http://www.w3schools.com/css/css_image_transparency.asp
My edited snipit is 


<!DOCTYPE html><html>
<head>
<style>
div.transbox
{
  width: 656px;
  height: 1427px;
  margin: 40px 0px;
  background-color: ffffff;
  border: 0px solid black;
  opacity:0.2;
  filter: alpha(opacity=20); /* For IE8 and earlier */

}
</style>
</head>
<body><div class="background">
<div class="transbox">
</div>
</div>
</body>
</html>

All I had to do was to fiddle around with the width, height, and margin, and the opacity.  This code had a result of a light grey background that was almost the width of the website and pretty long.  With 20 percent opacity it gave a gist of a grey background that allowed the letters to be readable against a pretty dark background.
Thanks forum!  The answer is in there if you look hard enough!
Victor



Photo of Mike F.

Mike F., Alum

  • 184,718 Points 100k badge 2x thumb
Victor4384

Thanks for sharing!!

Photo of Victor4384

Victor4384

  • 1,282 Points 1k badge 2x thumb
Not a problem Mike!  Homestead is a pretty powerful tool if you spend a little time doing some research.  I think other web builders are STILL just barely catching up by including anchor links!
Photo of Mike F.

Mike F., Alum

  • 184,718 Points 100k badge 2x thumb
Thanks again. In this business technology can change pretty fast. Fortunately with websites, if you the SiteBuilder doesn't do something you wish, you can usually find html code on the internet  that will let you accomplish just about anything.

Mike

This conversation is no longer open for comments or replies.