I want to use 'opacity' above a html homepage of my site. Can I use it?

203 views Asked by At

I am making a website but I just want to display a notice (only once when member open website) . This notice must display just above the html homepage (because homepage may change from member to member). I want to use 'opacity' to make a fade page above the homepage (so that members can also see the homepage beside the four sides of notice), I can not use "alert" because the notice contains pictures, code and some extra feature of codes like front color. So far I've found 'opacity' uses the above image but how can I use 'opacity' above a html homepage of my site ???

<html>
<head>
<style>
div.bacgro
  {
  width:500px;
  height:250px;
  background:url of a jpg file;
  border:2px solid black;
  }
div.trabox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.trabox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>

<body>

<div class="bacgro">
<div class="trabox">
<p>This is some text that is placed in the transparent box. It may contain some code and small profile image also ...
</p>
</div>
</div>

</body>
</html>

but the most importantly I want to replace the background:url of a jpg file; in to a background:"url of my site's homepage";

3

There are 3 answers

0
GrayJ On

I'm not quite sure what you're asking but if you want an alert or little message you have a few options.

Alert Box

<script>
function myFunction() 
{
alert("I am an alert box!");
}
</script>

Or you could try this

 <script language="javascript" type="text/javascript">  
 <!--
 function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
 }

 // -->
 </script>

Those are two common ways to do a pop-up message.

1
Super_user_two On

If your notice is just an image, in your css you can do:

.yourNoticeId
{
  opacity:0.4; /* scale 0-1 */
  filter:alpha(opacity=40); /* For IE8 and earlier */
}

If it is part of a div

.yourdiv
{
   /*r = red color g = green color b = blue color and a = opacity 0-1 scale */
   background: rgba(200, 54, 54, 0.5); 
}
0
iam_atul22 On

The thing with using opacity is, your element or component will always be there and take the space it is required or allowed to have. So for better purposes, you can use display and opacity both and after your fade animations, write display to none.