Mit CSS zu machen, meine Gradienten Bild Strecken sich vertikal

Brauche ich etwas Hilfe.

Hier ist, was ich bekommen jetzt:
img-ref

Brauche ich den Verlauf dehnen sich vertikal mit CSS.

Hier der code für mein CSS + HTML.

<html>
    <head>
        <title>Test Site 1 - Color Palettes and Scheme Test</title>
        <link rel="stylesheet" href="TestSiteCSS.css" type="text/css">      
    </head>

    <body>
        <div class="Content">
            <img src="Logo.png" alt="Logo MiCompra" />  

            <H1>Bienvenidos a MiCompra!</H1>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>
            <p>Bienvenidos a MiCompra. Compre lo que quiera, cuando quiera.</p>                     
        </div>
    </body>
</html>

/Separete CSS-Datei/

body 
{
    background-image: url("TestPatternClouds.png");  
    background-repeat: repeat;
    margin: auto;
    width: 780px; /* or other value */
}

.Content
{
    margin: auto;
    width: 780px; /* or other value */
    /*background-color: #4AD0EB;*/
    background-image: url("TestContentBackground.png");
    back
}
  • Warum Fragen Sie nicht, diese in der doctype (doctype.com)?
  • es ist in Ordnung hier.
InformationsquelleAutor Sergio Tapia | 2009-09-02
  1. 11

    Können Sie nicht ziehen Sie es. Was Sie allerdings tun können, ist die Veränderung seiner background-repeat zu repeat-x und legen Sie eine Hintergrundfarbe entspricht der Farbe am unteren Rand des Bildes. Dies erscheint der gradient nur einmal senkrecht, dann zeigt eine Volltonfarbe mit keine Naht zwischen den beiden

    • 2 Jahren auf und diese Antwort ist immer noch mir geholfen!
    • scheint die beste Lösung zu sein, bis Verläufe sind weitgehend unterstützte CSS.
    • Ich vergaß zu zwingen, das zu wiederholen repeat-x nur. Funktioniert jetzt perfekt!
    InformationsquelleAutor ceejayoz
  2. 1

    Den CSS3 background-size Eigenschaft können Sie angeben, einen Prozentsatz für ein hintergrund Bild in der Höhe, aber bis es so stark unterstützt, es gibt keine Möglichkeit das direkt tun.

    ceejayoz s Vorschlag ist wahrscheinlich Ihre beste Wette; und wenn Sie einen wirklich hohen Gradienten der Effekt nicht alles, was wahrnehmbar ist (ich habe die gleiche Technik auf mehreren Seiten, die ich entworfen habe).

    • Heute funktioniert, zumindest bei Chrome und Firefox 🙂
    InformationsquelleAutor Donut
  3. 1

    In der nahen Zukunft, können Sie mithilfe von CSS-Verläufen zu tun. Dies funktioniert bereits in Safari 4, und wird auch in Firefox 3.6. Das ganze ist noch eher experimentell, aber, und die details wird wahrscheinlich ändern, wie CSS3 entwickelt.

    Für Oper, die Sie nutzen könnten SVG. Erstellen Sie eine Datei wie diese (Beispiel weitgehend von der SVG-Spezifikation):

    <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g>
    <defs>
      <linearGradient id="MyGradient" x1="0" y1="0" x2="0" y2="100%">
        <stop offset="0%" stop-color="blue" />
        <stop offset="100%" stop-color="white" />
      </linearGradient>
    </defs>
    <rect fill="url(#MyGradient)" width="100%" height="100%"/>
  </g>
</svg>

    Und dann einfach als hintergrund-Bild:

    .Content { background: url(gradient.svg); }

    Für Internet Explorer könnte man eine Farbverlauf-filter. E. g.

    .Content {
    filter: progid:DXImageTransform.Microsoft.Gradient(
        startColorstr='blue', endColorstr='white', gradientType='0');
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(
        startColorstr='blue', endColorstr='white', gradientType='0')";
}

    Andere als diese, und bei Browsern, die nicht unterstützt diese, Ihre beste Wette ist, um den Vorschlag Folgen, gegeben durch ceejayoz, Denker und Donut vor mir: don ' T (vertikal) wiederholen Sie den Gradienten Bild und den hintergrund, dass das Ende der Steigung.

    InformationsquelleAutor mercator
  4. 0

    Können Sie wahrscheinlich nicht. Ist es eine option, um produzieren einen höheren Gradienten Bild, das wird nicht immer vollständig angezeigt (es werden nicht immer sehen, den ganzen Weg bis weiß) wird aber immer groß genug? Es ist nicht zu schwer zu verstecken der überlauf...

    InformationsquelleAutor Tomas Aschan
  5. 0

    Sie nicht dehnen, wenn die Bilder festlegen als hintergrund.

    Dinge, die Sie tun können:

    1. Hässlich Weg: verwenden IMG-tag und dehnen Sie die Höhe.

    2. Guten Weg: setzen Sie einen weißen hintergrund url(...) no-repeat, so dass alle nach Verlauf wäre in der Farbe der letzten Zeile Ihres Verlaufs.

    InformationsquelleAutor Thinker
  6. 0

    Können Sie nicht Strecken, Bilder mit CSS

    InformationsquelleAutor
Schreibe einen Kommentar