Zum Inhalt springen

Background keine Transparents

Erstellt am 2. November 2017 · 4 Antworten · letzte Antwort am 3. November 2017

Tags: HTML & CSS, Frage

Power-Poler ·

Hallo,
Hab ein Problem mit css und Background.
Und zwar habe ich ein div Element, welches, wenn der Text Inhalt zu groß wird, diesen mit (...) abschneidet, sodass der Text nicht über die Box laufen kann, und man trotzdem sieht, das etwas fehlt.

Des Weiteren die gleichen Regeln mit ":hover" und "overflow: visible;" damit wenn man mit der Maus drüberfährt, den gesamten Text angezeigt bekommt. Dieser läuft auch über das Element, in das Nächste, und verschiebt nichts dabei (wie es soll).

Leider bekomme ich das mit der Transparenz nicht hin. Habe schon opacity 1 versucht, z-index auf 1 Milliarden gesetzt und und und...
Der Hintergrund bleibt Transparent.

Habe es jetzt mit background-color:rgba(0,0,255,1.0); versucht. Der Hintergrund ist nun nicht mehr Transparent. Leider kann ich hier nur "kräftige" Farben wählen, damit ich so einen leichten blau Schimmer bekomme, muss ich ja wider den Alpha wert ändern, und die Transparenz ist wieder da.

div#sitemap .sitemapelementname a span{
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	width: 17em;
	vertical-align: middle;
}

div#sitemap .sitemapelementname a span:hover{
	overflow: visible;
	text-overflow: ellipsis;
	display: inline-block;
	vertical-align: middle;
	width: auto;
	background-color:rgba(0,0,255,1.0);

}

Vielleicht habt ihr noch eine Idee für mich.
Schonmal Danke für eine Antwort
Mfg
Power-Poler

Norman2k ·

Hast du einen Link zur Seite oder ein Screenshot? Ich kann mir gerade nicht so richtig vorstellen was du meinst.
Und bitte beachten, der Datei-Upload funktioniert hier im Forum nicht, solltest du also ein Screenshot machen, musst du den irgendwo anders hoch laden und den link hier posten

Power-Poler ·

Danke für deine Antwort
Ist leider beides nicht möglich.
Ich versuche es mal genauer zu beschreiben:
Es ist eine Sitemap: #126347
Es wurde nur folgende Zeile bei der Erstellung ergänzt: 1.NO.stdWrap.wrap = <span>|</span>
Sodass der Text der Links sich in einem span tag befinden.

Eintrag 1             |
  Eintrag 1.1         |
Eintrag 2             |
  Eintrag 2.2         |
  Eintragwelcherzul...|
  und deswegen        |
  mit '...' abgesch...|
  wird                |
Eintrag 3             |

Wenn man nun mit der Maus über den Eintrag mit den '...' fährt, wird dieser Vollständig angezeigt:

Eintrag 1              |
  Eintrag 1.1	       |
Eintrag 2              |
  Eintrag 2.2          |
  Eintragwelcherzulangist 
  und deswegen         |
  mit '...' abgeschnitten  
  wird                 |
Eintrag 3              |

Sodass man sehen kann was da steht.
Diese Überlänge läuft über das umschließende div in den content Bereich.
Allerdings ist dieses Überlaufen Transparent, was das Lesen doch etwas erschwert.

Das einzige was ich bisher gefunden habe, was greift, ist:
background-color:rgba(0,0,255,1.0);
Nur kann ich hier, z.B. kein Hellblau einstellen.

Norman2k · · Beste Antwort

Wieso kannst du mit background-color:rgba(0,0,255,1.0); kein "Hellblau" darstellen? Reichen dir die 16,7 Mio Farben nicht 😉

Power-Poler ·

Danke, hab mal wieder auf dem Schlauch gestanden. 😃
Hab immer nach einer rgba Farbtabelle gesucht, bei der ja der Alpha Kanal mit angepasst wird.
Hab jetzt einfach die rgb Farbtabelle genommen.

background-color:rgba(191,239,255,1.0);
color: rgb(64,16,0);

Ein passendes Hellblau, und die Komplementärfarbe dazu 😃