So erstellen Sie eine Farbverlauf-hintergrund für eine HTML-Seite

Ich bin in den Prozess des Lernens HTML.

Was ist der beste Weg, um erstellen Sie einen Gradienten hintergrund für eine HTML-Seite?

Bisher dies ist, was ich als hintergrund:

body style="background-color:Powderblue"

Ich weiß, das ist nicht eine Steigung.

InformationsquelleAutor alpha_nom | 2012-04-11

7

Dies nicht in html, sondern es kann in css (speziell css3).

Müssten Sie eine Klasse, um den Körper Ihrer Seite oder ein div innerhalb es, der Sie umgibt, alle Ihre Inhalte. Sie können eine css gradient generator um den code in deiner css-Klasse.

Hier ist ein einfaches Beispiel auf ein div: http://jsfiddle.net/8fDte/

Können Sie Folgendes tun, wenn Sie wollen, dass es auf den Körper. Hinweis: Sie müssen den link zu der css-Datei, speichern Sie die Stile.

HTML
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <LINK href="PathToCss.css" rel="stylesheet" type="text/css">
  </HEAD>
  <BODY class="MyGradientClass">

  </BODY>
</HTML>
```
CSS

Dieser code kann erzeugt werden, indem eine css-gradient-generator wie die oben verlinkten.
```
.MyGradientClass
{
    height:200px;
     background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
    background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, rgb(113,61,62)),
        color-stop(0.63, rgb(147,92,93)),
        color-stop(0.82, rgb(177,120,121))
    );   
}
```
Edit:

Als Rory erwähnt, CSS3 nicht vollständig unterstützt von allen modernen Browsern. Es gibt allerdings einige tools, wie PIE CSS zu helfen, D. H. zu akzeptieren, einige CSS3-Funktionen.

können Sie mir zeigen, ein Beispiel, wie ich hinzufügen-Klasse, um meinen Körper in Ordnung für html-zu erkennen, css3 mit anderen Worten: der code
Sie haben nicht einmal um eine Klasse... nur setzen Sie es innerhalb des Körpers in Ihrem css
Das ist richtig, konnte Sie nur legte es auf einen div im inneren des Körpers. So oder so wird funktionieren.
Ok, und was wird mein PathtoCss.Css Enthalten?
Die PathToCss.css ist die css-Datei enthält die css-Klasse, die Sie erstellen. Ein Beispiel für die Klasse ist in der jsfiddle habe ich erstellt.

InformationsquelleAutor Josh Mein
2

Es ist nicht möglich, eine Steigung, die mit HTML allein. Es gibt neue features in CSS3, mit denen Sie Sie erstellen einen Verlauf, jedoch sind diese nicht vollständig von allen Browsern unterstützt.

Wenn Sie möchten, um zu Lesen, etwas mehr über CSS3 Farbverläufe, Lesen dieser Artikel

Es ist auch ein praktisches online-tool, das erstellen der CSS-code erstellen Sie einen Verlauf Ihrer Spezifikation, hier.

lol, ich hatte die selbe Reaktion, gleich zwei links sogar! Rory ist richtig.
Ok. Dann kommen wie ich sehe eine Menge von gradient professionelle website mit Farbverlauf-hintergrund? Verwenden Sie eine andere Sprache. So denken Sie, es ist convinient zu verwenden, css3, denn ich bin nur ab oder verwenden Sie eine andere Sprache?
Sie sind wahrscheinlich Hintergrundbilder.
Sagen wir ich machen einen hintergrund in photoshop. Wie würde das ablaufen?
CSS: background-image: url('path/to/image.jpg');

InformationsquelleAutor Rory McCrossan

Styling in externen Platten ist ein einfacher, schneller und effizienter Weg, um Stil Ihre web-Seiten, besonders wenn Sie mehrere Seiten, die einen link auf das Stylesheet(s). Hier können Sie das gesamte styling von allen Seiten gleichzeitig mit nur einer Zeile code. Es ist ok, aber wenn Sie eine einzelne Seite, die Sie haben oder wenn Sie eine einfache Seite, um das unterschiedliche Aussehen von selbst, inline-styling ist ausreichend, aber nicht Häufig. Siehe unten für schnelles Beispiel.

(inline-styling für jede Seite)

<!doctype html>
<html>
<head>
   <title>THIS WOULD GET AGGRAVATING IF DONE ON 10 PAGES!</title>
   <style="text/css">
      body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
      h1 {text-align: center, font-weight: bolder;}
      p {text-indent: 20px; line-height: 25px;}
   </style>
</head>
<body>
</body>
</html>

....oder wäre es b, wie dies

   <!doctype html>
      <!doctype html>
<html>
<head>
   <title>THIS CHANGES SAME PARAMETERS ON 100 PAGES WITH SAME LINK INSTANTLY!</title>
   <link rel="stylesheet" href="/cssfolder/yourcssheet.css" />

</head>
<body>
</body>

und Ihre "yourcssheet.css" - Stylesheet würde dann so Aussehen

/*BEGINNING OF STYLESHEET, NO OTHER CODING NECESSARY BUT SOME MIGHT PUT @meta charset utf-8 AT THE TOP BUT IS NOT NEEDED TO FUNCTION*/

    body {background: blue; font-family: Arial, Georgian, Sans-serif; font-size: 19px;}
      h1 {text-align: center, font-weight: bolder;}
      p {text-indent: 20px; line-height: 25px;}

/*END OF STYLESHEET*/

Nun, anstatt zu gehen durch jeder Stil auf jede einzelne Seite Kopf, können Sie einfach ändern Sie es alle mit einem einfachen externen Platte alle miteinander verbunden durch die folgenden.

Hoffe, das hilft. [email protected]

InformationsquelleAutor jhawk

0

Verwenden Sie diese http://www.colorzilla.com/gradient-editor/

CSS angewendet werden soll, in einer separaten stylesheet... nie anwenden inline-styling.

Vielleicht wichtig zu erklären, warum es wichtig ist, um alle styling in einem externen Stylesheet.

InformationsquelleAutor hcharge
0

Gibt es viele online-tools, erstellen von Farbverläufen. Entweder Sie nutzen zu können, oder Sie können Ihre eigenen

Einfach hier überprüfen: http://www.cssmatic.com/gradient-generator

Sie können auch Ihre eigenen erstellen, indem Sie auf diese Weise

CSS
```
background-image: -webkit-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -moz-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -ms-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: -o-linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
background-image: linear-gradient(bottom, rgb(color_code) 25%, rgb(color_code) precent%, rgb(color_code) percent%);
```
Bitte legen Sie die entsprechenden Informationen hier statt der Verknüpfung, da der link ungültig in der Zeit.
der link ordnungsgemäß funktioniert, überprüfen Sie bitte die URL und auch die Informationen, die ich hier verwendet wird, relevant ist, haben Sie versucht, diese?
Haben Sie auch einen Blick in den link cssmatic.com/gradient-generator

InformationsquelleAutor Kamal Kumar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.