Jump to content

Image transparency


girl

Recommended Posts

Hello everyone.I need your help people.Here I have a code: in html<div class="word-box"> <table><tr><td colspan="2"><h1>title</h1></td></tr> <tr><td style="width:150px";><p>some text </p></td> <td><p>some text </p></td></tr></table></div> in css.word-box{margin-top:-255px; margin-left:0px;width:300px; height:350px; border-width:2px; border-style: solid; border-color: #5492D9; background-image:url('images/61.jpg');} .word-box img{opacity:0.4;} BUt image doesn't display transparent.What is wrong in my code?Thanks :)

Link to comment
Share on other sites

.word-box{opacity:0.4;}

Will make the .word-box class element with background-image plus every child element transparent to 40%. IF you require just the image to be transparent, one solution it to place either in its own div element within word-box, OR use img element itself and apply opacity to that, along with position absolute.

.word-box{ position: relative;margin-top:-255px;margin-left:0px;width:300px;height:350px;border-width:2px;border-style: solid;border-color: #5492D9;/*background-image:url('images/61.jpg');*/}.word-box img.bg{top:0;left:0;position:absolute;width:300px;height:350px;opacity:0.4;z-index:0;}

<div class="word-box"><img clas="bg" src="images/61.jpg" alt="" title="" /><table><tr><td colspan="2"><h1>title</h1></td></tr><tr><td style="width:150px";><p>some text </p></td><td><p>some text </p></td></tr></table></div>

  • Like 1
Link to comment
Share on other sites

<p>

Hello everyone. I need your help people. Here I have a code: in html <div class="word-box"> <table> <tr> <td colspan="2"> <h1>title</h1> </td> </tr> <tr> <td style="width:150px";> <p>some text </p> </td> <td> <p>some text </p> </td> </tr> </table> </div> in css .word-box { margin-top:-255px; margin-left:0px; width:300px; height:350px; border-width:2px; border-style: solid; border-color: #5492D9; background-image:url('images/61.jpg'); } .word-box img { opacity:0.4; } BUt image doesn't display transparent. What is wrong in my code? Thanks :)
Hello everyone. I need your help people. Here I have a code: in html <div class="word-box"> <table> <tr> <td colspan="2"> <h1>title</h1> </td> </tr> <tr> <td style="width:150px";> <p>some text </p> </td> <td> <p>some text </p> </td> </tr> </table> </div> in css .word-box { margin-top:-255px; margin-left:0px; width:300px; height:350px; border-width:2px; border-style: solid; border-color: #5492D9; background-image:url('images/61.jpg'); } .word-box img { opacity:0.4; } BUt image doesn't display transparent. What is wrong in my code? Thanks :)
Hello everyone. I need your help people. Here I have a code: in html <div class="word-box"> <table> <tr> <td colspan="2"> <h1>title</h1> </td> </tr> <tr> <td style="width:150px";> <p>some text </p> </td> <td> <p>some text </p> </td> </tr> </table> </div> in css .word-box { margin-top:-255px; margin-left:0px; width:300px; height:350px; border-width:2px; border-style: solid; border-color: #5492D9; background-image:url('images/61.jpg'); } .word-box img { opacity:0.4; } BUt image doesn't display transparent. What is wrong in my code? Thanks :)
</p><p> </p><p> </p><p> </p><p> </p><p> </p><p>use this code for sure you get an image as transparency as you required.</p><p> </p><p> </p><div class="msg Nth">opacity:0.4;<br />filter:alpha(opacity=40)</div><div class="msg Nth"> </div><div class="msg Nth">in word-box mention size of opacity clearly how much percentage you require?</div>
Link to comment
Share on other sites

Hello everyone.I need your help people. Here I have a code: in html <div class="word-box"> <table><tr><td colspan="2"><h1>title</h1></td></tr> <tr><td style="width:150px";><p>some text </p></td> <td><p>some text </p></td></tr></table></div> in css .word-box{margin-top:-255px;margin-left:0px;width:300px;height:350px; border-width:2px;border-style: solid;border-color: #5492D9;background-image:url('images/61.jpg');} .word-box img{opacity:0.4;} BUt image doesn't display transparent.What is wrong in my code? Thanks :)
try this code. for sure it will help you. opacity:0.4;filter:alpha(opacity=40) mention clearly how much size you want for your image in opacity.
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...