[CSS] Transparent des Hintergrundes aber nicht der Schrift

Dieses Thema im Forum "Webdesign" wurde erstellt von rushzero, 3. März 2010 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 3. März 2010
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Transparent des Hintergrundes aber nicht der Schrift

    Folgende CSS:
    Spoiler
    Code:
    /*
    Theme Name: Urban
    Theme URI: http://paulicio.us/2009/07/20/urban-a-free-wordpress-theme/
    Description: A timeline based theme
    Version: 1.0
    Author: Paul Bennett
    Author URI: http://paulicio.us/
    Tags: timeline
    */
    
    * { margin: 0; padding: 0 ;}
    
    body {
     font-size: 62.5%; /* Resets 1em to 10px */
     font-family: "Lucida Sans", sans-serif;
     background: url('https://www.xup.in/pic,56632588/bg.jpg') no-repeat fixed 50% 50%;
     color: #222;
    }
    
    /* Block Elements */
    
    #nav {
     width: 100%;
     height: 206px;
     position: fixed;
     top: -200px;
    }
    
    #top {
     width: 100%;
     height: 206px;
     background-color: #222;
    }
    
    #page {
     width: 620px;
     margin: 0px auto;
     margin-top: 50px;
    }
    
    #content {
     width: 100%;
    }
    
    #timeline {
     height: 25px;
     position: fixed;
     top: 20%;
     right: 0px;
     margin-top: 245px;
     padding: 0px 20px;
     background: url('images/25px-bar.png') repeat-x 0 0;
    }
    
    #timeline .monthstats {
     width: 0px;
     padding: 0px;
     position: relative;
     bottom: 72px;
     display: none;
    }
    
    #timeline .monthstats .text {
     font-family: Arial, sans-serif;
     width: 77px;
     height: 55px;
     padding: 4px 6px;
     font-size: 0.9em;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: -1px;
     line-height: 2.2em;
     color: #555;
     background: url('images/stats-pointer.png') no-repeat 0 0;
    }
    
    #timeline .yearpointer {
     width: 0px;
     padding: 0px;
     position: relative;
     top: 45px;
     left: -45px;
    }
    
    #timeline .yearpointer span {
     padding: 12px 20px;
     font-family: Arial, sans-serif;
     font-size: 2.4em;
     font-weight: bold;
     letter-spacing: -1px;
     color: #fff;
     background: url('images/year-pointer.png') no-repeat 0 0;
     //display: none;
    }
    
    #moveright, #moveleft {
     width: 25px;
     height: 25px;
     position: fixed;
     top: 20%;
     margin-top: 245px;
    }
    
    #moveright { right: 0px; background: url('images/arrow-right.png') no-repeat 0 0; }
    #moveleft { left: 0px; background: url('images/arrow-left.png') no-repeat 0 0; }
    
    #postline {
     position: fixed;
     top: 20%;
     right: 0px;
     overflow: hidden;
    }
    
    .month {
     float: right;
     display: inline;
    }
    
    .post {
     width: 280px;
     height: 200px;
     padding: 10px;
     padding-bottom: 21px;
     margin: 0px 15px;
     background: url('images/post-bg.png') no-repeat 0 0;
    [COLOR="Red"] filter:alpha(opacity=50);
     -moz-opacity:0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;[/COLOR]
    
     float: right;
     display: inline;
    
    }
    
    .postsingle {
     width: 600px;
     margin-bottom: 50px;
     padding: 10px;
     background: #fff;
    }
    
    .openpost {
     background-color: #f5f5f5;
    }
    
    .postmetadata {
     width: 270px;
     padding: 10px 10px 0px 0px;
     position: absolute;
     bottom: 21px;
     background: #fff;
    }
    
    .imgzoom {
     position: absolute;
     bottom: 21px;
     background: #fff;
     margin-left: 261px;
     display: none;
    }
    
    .imgzoom img { padding: 6px 0px 0px 10px; }
    
    .comment {
     margin: 10px 0px;
     padding: 10px 10px 20px 10px;
     border-top: 1px solid #f3f3f3;
     background: url('images/comment-white.png') no-repeat 0 100%;
    }
    
    .alt{
     background: url('images/comment-gray.png') no-repeat 0 100%;
    }
    
    .bypostauthor {
     background: url('images/comment-pink.png') no-repeat 0 100%;
    }
    
    .authorvcard {
     margin-bottom: 10px;
    }
    
    .avatar {
     float: left;
    }
    
    .commentmetadata {
     float: left;
     margin-left: 10px;
     padding: 10px 0px 4px 0px;
     background: url('images/post-title.png') no-repeat 0 100%;
    }
    
    #trackbacks {
     display: none;
    }
    
    #header, #footer {
     width: 1000px;
     height: 25px; 
     position: fixed;
     bottom: 0px;
     left: 50%;
     margin-left: -500px;
     background: url('images/25px-bar.png') repeat-x 0 0;
     border: 1px solid #000;
     border-bottom: 0px;
     z-index: 200; /*haha*/
    }
    
    #header {
     top: 0px;
     background: transparent;
     border: none;
    }
    
    .panel {
     width: 150px;
     padding: 5px 8px;
     background: #fff;
     color: #222;
     position: relative;
     border: 1px solid #000;
     border-bottom: 0px;
     display: none;
    }
    
    .inner {
     width: 241px;
     height: 25px;
     background: url('images/25px-bar.png') repeat-x 0 0;
     border: 1px solid #000;
     border-top: none;
    }
    
    .message {
     padding: 0px 20px;
     font-size: 2em;
     letter-spacing: -2px;
    }
    
    #suggest {
     width: 223px;
     min-height: 14px;
     padding: 15px 10px 8px 10px;
     position: relative;
     top: -15px;
     left: 567px;
     background: url('images/suggest.png') no-repeat 0 0;
    }
    
    /* Typography */
    
    a:link, a:visited {
     color: #222;
     text-decoration: none;
     outline: none;
    }
    
    a:active, a:hover {
     color: #555;
     outline: none;
    }
    
    a img {
     border: none;
    }
    
    a:link.title, a:visited.title {
     font-family: "Helvetica Neue", Arial, serif;
     font-size: 2.8em;
     font-weight: bold;
     color: #fff;
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: -2px;
     padding: 5px 10px;
     background: url('images/bg-black.png') repeat 0 0;
    }
    
    h2 {
     letter-spacing: -1px;
    }
    
    h2 a {
     font-size: 1.2em;
     letter-spacing: -2px;
    }
    
    h3 {
     margin: 5px 0px;
     letter-spacing: -1px;
    }
    
    .description {
     text-transform: uppercase;
     color: #c0c0c0;
     margin-top: 20px;
    }
    
    .posttitle {
     padding-bottom: 7px;
     background: url('images/post-title.png') no-repeat 0 100%;
    }
    
    .posttitle a:link, .posttitle a:visited, .imgtitle a:link, .imgtitle a:visited {
     color: #000;
     font-size: 12px;
     font-weight: bold;
     letter-spacing: -1px;
    }
    
    .imgtitle, .imgtags {
     position: absolute;
     padding: 0px 10px 6px 0px;
     background: #fff;
    }
    
    .imgtags, .thetags {
     padding-left: 14px;
     background: #fff url('images/tag.png') no-repeat 0 2px;
     display: none;
    }
    
    .thetags {
     padding-bottom: 2px;
     display: inline;
    }
    
    .imgtags a:link, .imgtags a:visited {
     font-family: Arial, sans-serif;
     text-transform: uppercase;
     color: #ff0066;
     font-size: 9px;
     font-weight: bold;
     letter-spacing: -1px;
    }
    
    .entry, .comment {
     font-size: 1em;
     line-height: 1.8em;
     margin-top: 5px;
     filter:alpha(opacity=100);
     -moz-opacity:1.0;
     -khtml-opacity: 1.0;
     opacity: 1.0;
    
    }
    
    .entry h1, .entry h2 {
     margin: 5px 0px;
     letter-spacing: -1px;
    }
    
    .entry a, .comment a {
     text-decoration: underline;
    }
    
    .entry img {
     padding: 10px;
     background: #fff;
    }
    
    .inlinepost .entry p, .postsingle .entry p, .comment p {
     padding: 5px 0px;
    }
    
    .postmetadata, .postmetadata a:link, .postmetadata a:visited, .imgmetadata, .imgmetadata a:link, .imgmetadata a:visited, .singlepostmetadata, .singlepostmetadata a:link, .singlepostmetadata a:visited, .numtrackbacks, a.showtrackbacks {
     font-family: Arial, sans-serif;
     text-transform: uppercase;
     color: #ff0066;
     font-size: 9px;
     font-weight: bold;
     letter-spacing: -1px;
    }
    
    .postmetadata a:hover, .postmetadata a:active, .imgmetadata a:hover, .imgmetadata a:active, .imgtags a:hover, .imgtags a:active, .singlepostmetadata a:active, .singlepostmetadata a:hover {
     color: #888;
    }
    
    .imgmetadata {
     padding: 6px 10px 0px 0px;
     position: absolute;
     bottom: 21px;
     background: #fff;
    }
    
    .singlepostmetadata {
     padding-bottom: 6px;
    }
    
    .date {
     padding-right: 8px;
     margin-right: 5px;
     background: url('images/spacer.png') no-repeat 100% 50%;
     display: inline;
    }
    
    .respondlink, a.showtrackbacks {
     padding-left: 8px;
     margin-left: 5px;
     background: url('images/spacer.png') no-repeat 0 50%;
     display: inline;
    }
    
    #timeline a {
     padding: 6px 10px;
     color: #fff;
     font-weight: bold;
     text-transform: uppercase;
    }
    
    #timeline .monthstats .text strong {
     position: relative;
     top: 2px;
     margin-right: 4px;
     color: #fff;
     font-size: 20px;
     letter-spacing: -2px;
    }
    
    #suggest, #suggest a {
     color: #fff;
    }
    
    #suggest strong {
     letter-spacing: -1px;
    }
    
    #suggest span {
     color: #aaa;
    }
    
    #footer a {
     color: #222;
    }
    
    #footer a.button, #footer span {
     color: #fff;
     height: 13px; /* HAHA */
     padding: 6px 10px;
     text-transform: uppercase;
     text-align: center;
     font-weight: bold;
     letter-spacing: -1px;
     display: block;
     float: left;
    }
    
    #footer a.button:hover, #footer a.selected {
     color: #222;
     background-color: #fff;
    }
    
    #footer a.info {
     color: #fff;
    }
    
    #footer span {
     float: right;
    }
    
    .panel small {
     font-size: 9px;
     color: #ff0066;
     text-transform: lowercase;
     margin-top: 4px;
     display: block;
    }
    
    blockquote {
     margin-top: 5px;
     padding: 0px 10px 10px 10px;
     background: url('images/comment-gray.png') no-repeat 0 100%;
    }
    
    /* Input */
    
    .searchbox {
     width: 200px;
     margin-right: 5px;
     padding: 5px 28px 5px 8px;
     color: #fff;
     background: url('images/magnify.png') no-repeat 100% 50%;
     border: none;
     outline: none;
     font-weight: bold;
     letter-spacing: -1px;
    }
    
    #commentform input, #commentform textarea {
     padding: 6px;
     margin: 2px 0px;
     border: 1px solid #aaa;
     font-family: "Lucida Sans", sans-serif;
     font-size: 1.2em;
    }
    
    #commentform input:hover, #commentform textarea:hover { background: #fafafa; }
    #commentform input:focus, #commentform textarea:focus { background: #fafafa; border: 1px solid #000; outline: none; }
    
    #commentform textarea {
     width: 566px;
    }
    
    #commentform #submit {
     margin-top: 8px;
     font-size: 12px;
     background: url('images/bg-black.png') repeat 0 0;
     border: 1px solid #000;
     color: #ddd;
    }
    
    #commentform #submit:hover {
     background: #222;
     color: #fff;
     cursor: pointer;
    }
    
    #commentform label {
     font-size: 1.4em;
     margin-left: 6px;
    }
    
    /* Lists */
    
    li {
     list-style: none;
    }
    
    .entry li {
     list-style-position: inside;
    }
    
    .entry ul li {
     list-style-image: url('images/right-arrow.png');
    }
    
    .entry ol li {
     list-style: decimal;
     margin-left: 20px;
    }
    
    #timeline li { display: inline; }
    #timeline li { float: right; }
    
    #footer li {
     list-style: none;
     display: inline;
    }
    
    #pagespanel li, #recentspanel li, #hotpanel li, #feedspanel li, #lastfmpanel li, #twitterpanel li {
     padding: 10px 0px;
     list-style: none;
     text-transform: uppercase;
     display: block;
     border-bottom: 1px solid #1a1a1a;
    }
    
    #recentspanel li img {
     margin-right: 8px;
     float: left;
    }
    
    #recentspanel li span {
     float: none;
     display: inline;
     color: #222;
     font-weight: normal;
     letter-spacing: normal;
     padding: 0px;
    }
    
    #feedspanel li.feed {
     background: url('images/rss.png') no-repeat 100% 50%;
    }
    
    /* Misc */
    
    .clearer { clear: both; }
    .left { float: left; }
    .right { float: right; }
    
    .loader {
     height: 20px;
     width: 20px;
     margin: 0px auto;
     background: url('images/ajax-loader.gif') no-repeat center center;
    }
    
    .buttons {
     height: 20px;
     width: 20px;
     padding: 5px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -10px;
     margin-left: -10px;
     background-color: #fff;
     display: none;
    }
    
    .blackloader {
     background: url('images/black-ajax-loader.gif') no-repeat 100% 50%;
    }
    
    .titlemo {
     background: url('images/bg-black.png') repeat 0 0;
    }
    
    .overlay {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     background: url('images/bg-black.png') repeat 0 0;
     z-index: 50;
    }
    
    .attachment, .inlinepost {
     padding: 10px;
     background: #fff;
     position: absolute;
     top: 40%;
     left: 50%;
     z-index: 100;
    }
    
    .inlinepost {
     padding: 0;
     background: transparent;
    }
    
    .postinner {
     margin-bottom: 100px;
     padding: 10px;
     background: #fff;
    }
    
    .close {
     width: 16px;
     height: 16px;
     background: url('images/close.png') no-repeat 100% 0;
    }
    
    .close:hover, .playthis:hover, .buttons:hover { cursor: pointer; }
    

    HTML
    Spoiler
    HTML:
     
    <div class="post" id="post-10">
    <div class="posttitle"><a href="..." rel="bookmark" class="postlink" title="Permanent Link to ist am Start"> ist am Start</a></div>
     
    <div class="entry">
     <p>Hi,<br />und herzlich willkommen<br /><br /></p>
    </div>
     
    <div class="postmetadata">
    
    <div class="date">22/02</div><a href="" title="Kommentiere ist am Start">No Comments</a></div>
    </div>
    

    Mein Problem wenn ich bei der Klasse .post(IM CSS rot markiert) mit
    HTML:
     filter:alpha(opacity=50);
     -moz-opacity:0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
    ergenze wird auch die Schrift Transparent was ich aber nicht will.

    Bild

    Kann mir da wer aushelfen bin leider nicht ganz so fit in CSS.
     
  2. 3. März 2010
    AW: Transparent des Hintergrundes aber nicht der Schrift

    Ja das ist doof. Das ganze wird nicht nur auf das DIV angewendet sondern auf alles was in dem DIV sich befindet auch noch. Einzige möglichkeit die ich kenne wäre, dass du zwei DIVS machst.

    Das eine mit der Transparenz also in dem Sinn die Background ebene und dann noch eins mit dem restlichten Inhalt. Das ganze aber nicht verschachtelt und die legst du dann übereinander musst du halt mit CSS positionieren.


    Ansonsten warten wir mal auf Murdoc was der schlaues parat hat. Hab mich bei dem Thema auch schon tot gegooglet.

    CSS3 hab ich gelesen soll das nicht mehr machen. Aber keine genaue Ahnung zu dem Zeitpunkt
     
  3. 3. März 2010
    AW: Transparent des Hintergrundes aber nicht der Schrift

    der trick ist, nicht das element durchsichtig zu machen sondern nur den hintergrund. das geht zb. mit nem halbtransparenten PNG ganz gut.
     
  4. 3. März 2010
    AW: Transparent des Hintergrundes aber nicht der Schrift

    Ja das hatte ich mir auch überlegt einfach ein Transparentes PNG zu nehmen, werd ich wohl dann auch machen.

    PS: Hab leider kein Bearbeitungs Programm hier könnte mir einer ein weißes PNG erstellen mit 70 % Transparens und vllt mit 85%. Größe 300 × 231 ?
     
  5. 3. März 2010
    AW: Transparent des Hintergrundes aber nicht der Schrift

    .post hat eine feste höhe und Breite, daher kannst du in Post ein Div einsetzen das die selbe höhe und breite hat und mit position: absolute; top0; left:0;z-index:0; als Hintergrund setzen.

    Bei dem innen liegenden Div kannst du anschließend die Transparenz verändern ohne das diese Auswirkung auf den Text darüber hat.

    P.s.: .post brauchst dann noch position:relative damit du dem inneren Div position:absolute zuordnen kannst!
     
  6. 3. März 2010
    AW: Transparent des Hintergrundes aber nicht der Schrift

    Danke für eure Hilfe ich hab es jetzt einfach über die Transparente Hintergrundbild gemacht.

    CLOSE
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.