Jump to content
girl

Image transparency

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 :)

Share this post


Link to post
Share on other sites

'.word-box' is the element it targets with this class, a space means you then target a child element of '.word-box', you are then telling it to target a child element of type img, which there are non!

Share this post


Link to post
Share on other sites

I will give you clue, which element uses a background image that you wish to make transparent....hmmmm, its not a img element, as that does not exist, hmmmm it can't be the table as that does not have a background image, soooo it must be...

Share this post


Link to post
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

Share this post


Link to post
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>

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...