Problem mit "opacity" Anfängerfrage

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Problem mit "opacity" Anfängerfrage

    Hallo,

    ich habe ein Problem mit dem "opacity-Filter", bi grad dabei eine Homepage zu entwerfen und habe bei den Frames den Hintergrund durchscheinen lassen. Das ist auch alles so wie ich es wollte, nur wenn ich jetzt Grafiken in diese Frames einsetze sind diese ebenfalls durchscheinend. Wie kann ich diese Grafiken wieder voll in den Vordergrund bringen ohne das der Hintergrund den opacity Filter verliert?

    Das ist der Code für den Frame (Hintergrundbild):
    #inframe {width:100%;height:100%;
    border:solid 1px #000;background-image:url(images/white.gif);
    -moz-opacity: 0.70;
    opacity: 0.70;
    _filter: progid: DXImageTransform.Microsoft.Alpha(opacity=70);
    }

    Die Grafiken setze ich über HTML ein.

    Sorry wenn ich mich vielleicht etwas komisch ausdrücke, aber für mich ist das alles noch Neuland :whistling:

    Ich hoffe einer von euch hat mich so in etwa verstanden und kann mir weiterhelfen.

  • Probier mal für deinen frame einen extra div-container zu verwenden und gib diesem dann andere eigenschaften

    Das ist der Code für den Frame (Hintergrundbild):

    Quellcode

    1. #inframe {
    2. width:100%;
    3. height:100%;
    4. border:solid 1px #000000;
    5. background-image:url(images/white.gif);
    6. -moz-opacity: 0.70;
    7. opacity: 0.70;
    8. _filter: progid: DXImageTransform.Microsoft.Alpha(opacity=70);
    9. }
    10. #inframe_pic {
    11. width:100%;
    12. height:100%;
    13. -moz-opacity: 1;
    14. opacity: 1;
    15. }
    Alles anzeigen


    und dann setzt du in deinem bild frame einen

    Quellcode

    1. <div id="inframe_pic"><img src="blabla" width="bla" height="bla" /></div>


    obwohl es könnte auch sein das es reicht wenn du ihm sagst das dein opacity filter 1 ist.


    @@oha ich weiß noch nicht mal wofür du
    _filter: progid: DXImageTransform.Microsoft.Alpha(opacity=70);
    brauchst -.-
    Beste Grüße,
    M4rc3L-XCN

  • Das hat leider auch nicht funktioniert, gibt es vielleicht eine Art "Überordnungsbefehl" den ich in den Bildern einbauen kann??? wie gesagt ich habe leider nich viel Ahnung von der Materie. Ich setze mal den kompletten Quelltext rein vielleicht entdeckt man ja dann meinen Fehler?! ?(

    Quellcode

    1. body {font-size: 14px;line-height: 18px;font-family: verdana,arial, helvetica, tahoma ,verdana, sans-serif;color:#000 }
    2. #main {border:solid 0px #000;
    3. width:100%;
    4. background-color:#;
    5. background-color:#;
    6. background-image:url(images/hauptbild.gif);background-repeat:no-repeat;
    7. background-position: 100% 100%;}
    8. #top{font: normal 11px verdana, sans-serif; color: #000; padding-top:0px;
    9. vertical-align:bottom;
    10. text-align:right;}
    11. #sp2 {vertical-align:middle;
    12. padding-top: 0px; padding-bottom: 0px;
    13. padding-left: 60px;padding-right:20px;
    14. background-color:#;
    15. font-size: 14px;line-height: 18px;font-family: verdana,arial, helvetica, tahoma ,verdana, sans-serif;
    16. text-align:center;color:#000;}
    17. #sp1 {
    18. padding-top: 10px; padding-bottom: 10px;
    19. padding-left: 60px;
    20. background-color:#;}
    21. body.backmain
    22. {margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; background-color: #fff;}
    23. #inhalt {width:100%;height:100%;
    24. color:#000;
    25. vertical-align:top;
    26. text-align:left;
    27. padding-top: 10px; padding-bottom: 10px;
    28. padding-left: 10px;padding-right: 10px;
    29. font-size: 18px;line-height: 20px;font-family: trebuchet ms, verdana,arial, helvetica, tahoma ,verdana, sans-serif;font-style:italic }
    30. #inframe {
    31. width:100%;
    32. height:100%;
    33. border:solid 1px #000000;
    34. background-image:url(images/white.gif);
    35. -moz-opacity: 0.70;
    36. opacity: 0.70;
    37. _filter: progid: DXImageTransform.Microsoft.Alpha(opacity=70);}
    38. #inframe_pic {
    39. width:100%;
    40. height:100%;
    41. -moz-opacity: 1;
    42. opacity: 1;}
    43. ul.liste1 {list-style-image:url(images/flowers3.gif)}
    44. #fuss {font: normal 14px verdana, sans-serif; color: #583219;
    45. height:24px;
    46. text-align:center;
    47. background-color:#;}
    48. #fuss2 {font: normal 11px verdana, sans-serif; color: #000;
    49. font-style:italic;
    50. height:24px;
    51. text-align:center;
    52. background-color:#;}
    53. h1{
    54. letter-spacing:0px;
    55. font-family: "Trebuchet MS",verdana,arial, helvetica, verdana, tahoma, sans-serif;
    56. font-size: 24px;text-align:left;color:#000;margin-bottom:36px}
    57. h2{
    58. letter-spacing:0px;
    59. font-family: "Trebuchet MS",verdana,arial, helvetica, verdana, tahoma, sans-serif;
    60. font-size: 22px;text-align:left;color:#583219;}
    61. #hpname{vertical-align:middle;
    62. text-align:center;color:#a3827c;font-family: "Trebuchet MS",verdana,arial, helvetica, verdana, tahoma, sans-serif;font-style:italic ;
    63. font-size: 20px;}
    64. .point1 {color:#583219}
    65. .point2 {color:#B1627F}
    66. .point3 {color:#C992A7}
    67. .point4 {color:#DCB8C6}
    68. .point5 {color:#ECD7DF}
    69. .point6 {color:#F9EEF1}
    70. html,body
    71. {scrollbar-arrow-color: #808080; scrollbar-base-color: #fff;
    72. scrollbar-highlight-color : #000000; scrollbar-shadow-color : #fff;
    73. SCROLLBAR-TRACK-COLOR: #fff;}
    74. a:link, a:visited, a:active{ font-size: 18px;line-height: 18px;font-family: trebuchet ms, verdana,arial, helvetica, tahoma ,verdana, sans-serif; color:#a3827c;background-color:transparent;}
    75. a:hover{
    76. color:#583219;
    77. }
    Alles anzeigen




    Der INDEX Teil:

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type"
    5. content="text/html; charset=iso-8859-1">
    6. <meta name="robots" content="INDEX,FOLLOW">
    7. <meta name="keywords"
    8. content="">
    9. <meta name="description"
    10. content="" >
    11. <title></title>
    12. <link rel="stylesheet" href="format.css" type="text/css">
    13. <link rel="stylesheet" href="menue.css" type="text/css">
    14. </head>
    15. <body class="backmain" scroll=no>
    16. <table id="main" align="center" cellspacing="0" cellpadding="0" border="0" height="100%" >
    17. <tr>
    18. <td valign="top" width="100%" >
    19. <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" >
    20. <tr>
    21. <td id="top" ><span id="hpname"><i style="font-family:fantasy;font-size:40px;color:#583219">&infin;</i> <i style="font-family:fantasy;font-size:40px;color:#583219">&infin;</i></span></td>
    22. </tr>
    23. <tr>
    24. <td width="80%" height="100%" >
    25. <table width="100%" align="center" height="100%" border="0" cellpadding="0" cellspacing="0" >
    26. <tr>
    27. <td height="100%"id="sp1" >
    28. <iframe src="home.html" id="inframe" name="haupt" frameborder="0" scrolling="auto" ></iframe>
    29. </td>
    30. </tr>
    31. </table>
    32. </td>
    33. <td width="20%" >
    34. <table height="100%" border="0" cellpadding="0" cellspacing="0" width="100%">
    35. <tr>
    36. <td height="100%" >
    37. <table width="100%" align="center" height="100%" border="0" cellpadding="0" cellspacing="0" >
    38. <tr>
    39. <td align="center" height="100%" id="sp2" >
    40. <div id="menu01">
    41. <ul >
    42. <li><a href="home.html" target="haupt">Home</a></li>
    43. </ul>
    44. </div>
    45. </td>
    46. </tr>
    47. </table>
    48. </td>
    49. </tr>
    50. </table>
    51. </td>
    52. </tr>
    53. <tr>
    54. <td id="fuss" ><b class="point1">¤</b>&nbsp;<b class="point2">¤</b>&nbsp;<b class="point3">¤</b>&nbsp;<b class="point4">¤</b>&nbsp;<b class="point5">¤</b>&nbsp;<b class="point6">¤</b></td><td id="fuss2" ></td>
    55. </tr>
    56. </table>
    57. </td>
    58. </tr>
    59. </table>
    60. </body>
    61. </html>
    Alles anzeigen



    Der Frame Teil:

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    2. <html>
    3. <head>
    4. <meta http-equiv="Content-Type"
    5. content="text/html; charset=iso-8859-1">
    6. <meta name="robots" content="INDEX,FOLLOW">
    7. <meta name="keywords"
    8. content="">
    9. <meta name="description"
    10. content="" >
    11. <title></title>
    12. </head>
    13. <body>
    14. <table width="100%" align="center" cellspacing="0" cellpadding="0" border="0" height="100%" >
    15. <tr>
    16. <td id="inhalt" >
    17. <a href="images/bild1.gif" >
    18. <img src="images/bild1mini.gif" border="1">
    19. </a>
    20. </td>
    21. <td><img src="images/pixelspace.gif" width="10" height="1" border="0" alt=""></td>
    22. </tr>
    23. </table>
    24. </body>
    25. </html>
    Alles anzeigen

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Nerimie ()

  • ich würde behaupten, dass das nicht geht. Du kannst mit CSS in der übergeordneten Seite, keine DOM Elemente des Iframes ansprechen.
    Sehe den Iframe als "abgeschlossen" - entweder er ist komplett durchscheinend, oder nicht. Frames/Iframes sind eben ziemlich eingeschränkt und daher eigentlich nicht mehr zu empfehlen.

    Du kannst den Iframe Hintergrund übrigens wie folgt transparent machen: tech-recipes.com/rx/1253/htmlc…-iframes-in-all-browsers/

    Quellcode

    1. <iframe style="width:70%; height: 500px;" src="about.html" frameborder="0" ALLOWTRANSPARENCY="true"></iframe>