Transparenten Hintergrund für eine Schrift erzeugen

    Ich habe einen aus bildern bestehenden "Film" der als Hintergrundbild abläuft ... da erscheint, bei jedem Hintergrundbild-Wechsel eine Schrift die in das Bild hineinfährt und dann wieder ausgeblendet wird.


    Diese Schrift hat einen transparenten Hintergrund und ist deshalb nicht gut zu lesen.


    Ich hätte gerne, dass die Schrift mit einem halb-transparenten Hintergrund (nicht schwarz auf weiss, sondern leicht grauer Hintergrung .. nur für die Schrift) erscheint ...wie kann man das erreichen?


    Die Seite funktionniert mit ziemlich komplizierten CSS definitionen, die ich (noch) nicht wirklich nachvollziehen kann.


    Danke

    brainstuff

    wenn ich dich richtig verstehe willst du eine graun Hintergrund die leicht durchsichtig ist ?


    p{

    color:black;

    background:grey;

    opacity:0.5;

    }


    Vieleicht so ?

    Aber das problem ist das die schrift dann auch leicht durchsichtig ist.

    Deshalb wäre mal gut das du dein Code zeigst,weil dann könnte man vieleicht was anderes machen

    basti1012 hier hast Du einen screen-shot von der Seite, die ich da gebastelt habe ... http://mail2vip.com/vippages/c…20schrift%20erscheint.jpg


    Und dies hier http://mail2vip.com/vippages/c…oll%20so%20erscheinen.jpg ist ein Scrennshot der durch markieren der Schrift (im Browser) entstanden ist und der gut zeigt, was ich da will und auch warum ... der Text auf dem weissen hintergrund ist viel besser lesbar wie der ohne ... das sieht man auf diesem Bild sehr gut (das sollte das CSS können).


    Die grosse Schrift im unteren Teil läuft in die Seite hinein und bleibt dann stehen und verschwindet wieder ... dann wird das nächste hintergrundbild geladen und eine neue Zeile erscheint. Wie Du siehst, ist das nicht optimal lesbar. Deswegen will ich erreichen, dass die Schrift mit einem teilweise durchsichtigen Hintergrund erscheint der dann dafür sorgt, dass die Schrift nicht irgendwo auf einem Hintergrund erscheint, der die gleiche Farbe hat.

    Oben auf dem Bild siehst Du auch Beispiel-Kästchen, die ich beim mouse over zum reagieren bringen will und womit man dann auf die entsprechenden Sprachen-Seiten gehen kann.


    Hinter dieser Seite hat es 2 CSS Dateien die das Video erzeugen. Die "Kästen" oben sind in einem 3. CSS File... die 3. Datei ist die einzige, die ich wirklich verstehe, die anderen 2 CSS Dateien sind derartig kompliziert, dass ich die nur teilweise verstehe ... zum Beispiel weiss ich wo der Text steht und wo ich die Textgrösse und Farbe bestimmen kann :


    Das ist zum Beispiel der HTML Teil von einer Schrift:


    <li><span>Image 02</span>

    <div>

    <h3> home automation and solar energy &nbsp;</h3>

    </div>

    </li>


    das folgende ist der CSS code für die Schriftart


    h1,h2,h3,h4,h5,h6 {

    font-size:100%;

    font-weight:normal;

    }


    (wenn ich normal in bold umstelle wird das etwas besser ... aber noch nicht ganz perfekt)


    und dann hat es noch das hier:


    .container > header h1{

    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

    font-size: 35px;

    line-height: 35px;

    position: relative;

    font-weight: 400;

    color: #ffffff;

    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);

    padding: 0px 0px 5px 0px;

    }

    .container > header h1 span{


    }


    Da kann man offensichtlich die Schriftgrösse ebeinflussen ... aber ich finde nicht heraus, wo da der Schrifthintergrund beeinflusst werden kann. An text-shadow habe ich noch nicht herumgebastelt ... das wäre vielleicht eine Idee, dass ich dem Text einen Schatten verpasse, der dann den Text abhebt, wenn der Hintergrund die Farbe vom Text hat...


    Danke,

    brainstuff



    Danke,

    Wenn du einen Link zu der Seite posten würdest, dann wäre die Sache in wenige Sekunden zu beantworten... mit deinen Codeschnipseln und Beschreibungen kann man nicht wirklich was anfangen :(!

    Aber so solltest du das Problem angehen. Öffne deine Seite im Browser und klicke mit der rechten Maustaste auf den Text, dem du den Hintergrund geben willst.

    In dem Kontextmenü, das beim Rechtsklick erscheint, wählst du den Punkt 'Element untersuchen' (kann bei verschiedenen Browsern sinngemäß auch anders heißen). Es öffnet sich der 'Inspektor', der Bestandteil von jeden gängigen Browser ist. Hier kannst du dann herausfinden, um welches Element es sich handelt, das du angekickt hast..

    Kennst du das Element, dann kannst du (wie Sempervivum weiter oben schon geschrieben und du offensichtlich nicht gelesen hast) mit dem CSS Format background-color: rgba(255, 255, 255, 0.5) diesem Element einen halbtransparenten, weißen Hintergrund geben,

    https://www.w3schools.com/cssref/css_colors_legal.asp

    Sempervivum hat dir ein Link gegeben wie man es machen kann.

    Vieleicht hilft dir das nicht ganz aber es zeigt wie es gehen sollte.


    Da du ja weißt wo du die schrift ändern kannst ,setzt noch ein backgrond:rgba(rot, grün, blau, opacity) ein.

    dann hast du einen Farblichen hintergrund mit durchsichtigkeit.

    rot,grün,blau müssen werte von 0-255 haben,aber da gibt es im Netzt noch einige Tolls die dir deinen Farb Wunsch zeigen.

    bei Opacity machst du Werte von 0.0 (durchsichtig bis 1 rein (Nicht durchsichtig) . Optimal fü´r dein Vorhaben wäre wohl bei 0.4-0.6 oder so


    EDIT: Was ist den jetzt passiert,man wahr ich langsam

    Zitat von Sempervivum

    Ja, das ist leider häufig so, dass zielführende Hinweise ignoriert werden, so auch hier:

    https://www.html.de/threads/countdown.58395/

    Es ist häufig schon zum Verzweifeln: Wenn man es nicht wortreich, ready-for-copy-and-paste und womöglich noch klicki-bunti präsentiert, wird man ignoriert. Substanz hat keinen Stellenwert.

    Ich habs gelesen und versucht,aber habs so nicht hinbekommen,kein Plan was ich falsch gemacht habe

    @basti1012 ihrhabt mir sehr gut gezeig wie ich das hin bringe ... es läuft jetzt ganz toll. Aber ich habe noch ein Problem: ich habe zum Beispiel eine Navigations-Linie an den Seitenkopf gebastelt. Die läuft auch hervoragend, aber nur ohne das "Video" (=full screen Slideshow) Wenn ich den Code für die Slideshow reinhänge, wird die Navigations-Linie, jdedesmal wenn ein neues Bild geladen wird, überschrieben...


    Hier ist der Body ..

    <body


    <div class="navbar">

    <div class="dropdown">

    <button class="dropbtn"><

    <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

    <a href="#">Link 1</a>

    <a href="#">Link 2</a>

    <a href="#">Link 3</a>

    <a href="#">Link 4</a>

    </div>

    </div>

    <a href="#home">Network Navigation</a>

    <a href="#news">home</a>

    <a href="#news">News2</a>

    <div class="dropdown">

    <button class="dropbtn">Dropdown

    <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

    <a href="#">Link 1</a>

    <a href="#">Link 2</a>

    <a href="#">Link 3</a>

    <a href="#">Link 4</a>

    </div>

    </div>

    <div class="dropdown">

    <button class="dropbtn">langues

    <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

    <a href="#">deutsch</a>

    <a href="#">english</a>

    <a href="#">italiano</a>

    <a href="#">slevennisk</a>

    </div>

    </div>

    </div>


    <div id="logo"><img style="width: 287px; height: 71px;" alt="logo" src="images/logo01.jpg"><br>

    </div>


    <ul class="cb-slideshow">


    <li><span>Image 01</span>

    <div>

    <h3> protection of inventions and ideas &nbsp;</h3>

    </div>

    </li>

    <li><span>Image 02</span>

    <div>

    <h3> local and international company plants &nbsp;</h3>

    </div>

    </li>

    <li><span>Image 03</span>

    <div>

    <h3> domain registration, administration &amp; design &nbsp;</h3>

    </div>

    </li>

    <li><span>Image 04</span>

    <div>

    <h3> internet &nbsp;</h3>

    </div>

    </li>

    <li><span>Image 05</span>

    <div>

    <h3> financing, &nbsp;</h3>

    </div>

    </li>

    <li><span>Image 06</span>

    <div> </div>

    </li>

    </ul>


    </body>

    </html>



    Die CSS Definitionen für die Slideshow sind in 2 CSS Dateien ... die NAv-Bar Definitionen sind in der 3. CSS Datei.

    Wenn ich die Slideshow aus dem HTML rausschmeisse, dann geht das mit der Nav-Bar perfekt. Wenn ich die Slideshow in das HTML File reinmache, dann sieht man zwar noch die NAV-Bar und das Logo aber es wird sofort von den Bildern überdeckt.


    Wie bringe ich das Logo und die NAV-Bar in den Vordergrund, sodass dann die Slideshow dahinter läuft?


    Danke.

    brainstuff

    so ganz verstehe ich nicht was du meinst.Weil ohne css weiß ich nicht wie das aussehen sol. Hast du schon eine Testseite online ?


    Ab und zu reicht es wenn du die reinfolge des einbinden änderst .

    erst

    Font-awesome css ( ich glaube mal das du die nutzt ??? wenn nicht dann weg lassen)

    dann die slideshow css

    dann die eigene wo navigation und co drinne ist.

    Fals das nicht geht versuch mal ein online version zu erstellen .JsFiddle.net oder codepen.io geht natürlich auch.


    EDIT : Dein <body> wird oben nicht geschlossen,das sieht so aus <body , das kann und wird wohl auch Fehler erzeugen.

    brainstuff : Kannst du bitte deine Codes in entsprechende Code-Tags einfügen und dann erst posten. Dies verbessert in erster Linie die Darstellung und Leserlichkeit deines Codes egal ob CSS, HTML, PHP, Javascript und co.


    Vielen Dank.


    Gruß,

    Stef

    Kannst du uns mal erklären, wie man das praktisch umsetzt? Sorry, wenn ich so doof frage, aber ich weiß echt nicht wie man das in diesem Forum macht.

    Zitat von Lupus_III

    Kannst du uns mal erklären, wie man das praktisch umsetzt? Sorry, wenn ich so doof frage, aber ich weiß echt nicht wie man das in diesem Forum macht.

    In dem Text-Editor, in dem du Beitrage erstellst, sind in der Navigation oben Funktionen wie bold, underline, usw.. Und in dieser Navigation, von ganz rechts außen, die 3 Funktion wählen (</>). Dann erscheint ein Fenster wo du dein Code reinkopieren kannst. Oft musst du auch einstellen welche Programmiersprache das ist, weil der Editor das manchmal nicht erkennt.

    Zitat von Stef

    In dem Text-Editor, in dem du Beitrage erstellst, sind in der Navigation oben Funktionen wie bold, underline, usw.. Und in dieser Navigation, von ganz rechts außen, die 3 Funktion wählen (</>). Dann erscheint ein Fenster wo du dein Code reinkopieren kannst. Oft musst du auch einstellen welche Programmiersprache das ist, weil der Editor das manchmal nicht erkennt.

    Danke (auch an bast1012) für die Aufklärung. Diese Funktion werde ich künftig gerne benutzen. :)

    basti1012 hier hast Du einen link zu meiner test version http://mail2vip.com/vtc/pxoxd/test.html ganz am Anfang, siehst Du oben, was angezeigt werden sollte und was dann von den Bildern überdeckt wird ... die Navigationsbar und das Logo kommt immer kurz wenn das Hintergrundbild wechselt. hier ist die Seite, ohne die Slideshow: http://mail2vip.com/vtc/pxoxd/test1.html  ... da geht der Kopf ..


    danke

    brainstuff


    PS das Body habe ich geschlossen ... das war ein Tippfehler, aber das macht scheinber nichts wenn das > fehlt.

    ich verstehe nicht was du meinst .Bei mir wird nix überdeckt.Einmal sehe ich das Menü ,das Logo und eine Slideshow,Ist alles sichtbar und nix verschiebt sich oder wird überdekt.


    Selbst im Quelltext kann ich nix finden was augeblendet sein könnte.

    Ist alles Sichtbar

    Das ist angelehnt an das mathematische Koordinatensystem (x - y - z). X und Y bestimmen die Position in der Breite und der Höhe - kommt dir bekannt vor?

    Z regelt in diesem System die Tiefe, also wie weit etwas vorne oder hinten ist. Mit einem hohen z-index ist das Element weit im Vordergrund und legt sich über Elemente mit niedrigerem z-index.

    Dein Slider hatte vorher z-index: 0; - aber ist auch gleichzeitig mit position: fixed; etwas störrisch, was diese z-index Geschichte angeht. Mit -1 hat es ja aber jetzt geklappt... oder?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden