girl Posted January 29, 2013 Share Posted January 29, 2013 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 More sharing options...
dsonesuk Posted January 29, 2013 Share Posted January 29, 2013 '.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! Link to comment Share on other sites More sharing options...
girl Posted January 29, 2013 Author Share Posted January 29, 2013 Yes, I got.So how I can give "opacity" to background??? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 29, 2013 Share Posted January 29, 2013 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... Link to comment Share on other sites More sharing options...
girl Posted January 31, 2013 Author Share Posted January 31, 2013 Yah, I got my mistake that it is not image.... but can't understand to what give that opacity??? Link to comment Share on other sites More sharing options...
dsonesuk Posted January 31, 2013 Share Posted January 31, 2013 .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> 1 Link to comment Share on other sites More sharing options...
xhtmlchamps1 Posted February 1, 2013 Share Posted February 1, 2013 <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 More sharing options...
xhtmlchamps1 Posted February 1, 2013 Share Posted February 1, 2013 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. 1 Link to comment Share on other sites More sharing options...
girl Posted February 1, 2013 Author Share Posted February 1, 2013 Solved... thanks to everyone )) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now