zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit linear-gradient in Chrome/ scharfe Übergänge verschwommen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.09.2017, 12:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2017
Beiträge: 2
pm93 befindet sich auf einem aufstrebenden Ast
Standard Probleme mit linear-gradient in Chrome/ scharfe Übergänge verschwommen

Hallo Zusammen,

ich bin Einsteiger im Thema CSS und habe ein Problem mit der CSS-Funktion "linear-gradient". Ich bekomme keine scharfen Kanten hin (siehe Bild).
Bei zwei Farben ist ein dünner schwarzer Strich zwischen den Farben. Bei drei Farben ist der Übergang schon arg verschwommen. Weiß einer was ich falsch mache? Als Browser verwende ich Chrome. Auf dem Handy mit chrome funktioniert es dagegen ohne Probleme.

Freundliche Grüße
Angehängte Grafiken
Dateityp: png linear-gradient.png (71,9 KB, 8x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.09.2017, 13:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.631
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Kannst du den Code auch mittels der Code-Funktion einbinden?
Ansonsten: Das hier wurde auch mit gradients gemacht, hier gibt es dein Problem nicht.
https://codepen.io/mackdoyle/pen/AhymJ

Hast du die Color-Stops auch auf den selben Prozentsatz gelegt?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.09.2017, 13:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.09.2017
Beiträge: 2
pm93 befindet sich auf einem aufstrebenden Ast
Standard

Ich habe das ganze nicht über einen Prozentsatz sondern über Pixel (px) gemacht. Die color-stops müssten so stimmen, oder?
Unter Microsoft Edge funktionierts auch aber bei Chrome bekomme ich keine scharfen Übergänge hin.

hier der HTML- und der CSS-Code:

HTML-Code:
<!doctype html>
<html lang="de">

    
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>


<body>

    <div id="wrapper1">
        <p>wrapper1</p>
    </div>
    
    <div id="wrapper2">
        <p>wrapper2</p>
    </div>
		
</body>

    
</html>
Code:
#wrapper1 {
    width: 900px;
    min-height: 200px;
    background-image: linear-gradient(to right, red 0px, red 20px, green 20px, green 500px, yellow 500px, yellow 900px);
    }
    
#wrapper2 {
    width: 900px;
    min-height: 200px;
    background-image: linear-gradient(to right, red 0px, red 20px, red 20px, green 20px, green 900px);
    }
Mit Zitat antworten
  #4 (permalink)  
Alt 12.09.2017, 14:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.631
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

du dürftest nicht der einzige mit dem Problem sein:
https://stackoverflow.com/questions/...-large-element

gibt einen zwei Jahre alten bugreport, schau mal, eventuell besteht der ja noch?
https://bugs.chromium.org/p/chromium...tail?id=543625
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Liste zentrieren - Probleme in Chrome TomBOX CSS 4 03.03.2015 10:54
Chrome, Probleme mit CSS hackt1sch CSS 1 22.10.2014 08:45
Probleme mit height: auto in Chrome axelf CSS 30 23.08.2013 00:58
Probleme in Chrome und IE8 Cu Chullain CSS 23 02.08.2011 13:36
Probleme mit dem IE (7) - Navigation wunderkind CSS 0 21.04.2010 18:06


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:44 Uhr.