4

私はHTMLを学んでいます。

HTMLページのグラデーションの背景を作成するための最良の方法は何ですか？

これまでのところ、これは私が背景として持っているものです：

body style="background-color:Powderblue"

これはグラデーションではないことを私は知っています。

4

5 に答える 5

7

これはhtmlでは実行できませんが、css（具体的にはcss3）では実行できます。

ページの本文またはページ内のすべてのコンテンツを囲むdivにクラスを追加する必要があります。cssグラデーションジェネレーターを使用して、cssクラスに配置するコードを取得できます。

divの簡単な例を次に示します。http：//jsfiddle.net/8fDte/

体につけたい場合は、以下もできます。スタイルを保存するcssファイルにリンクする必要があることに注意してください。

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

このコードは、上記のリンクのようなcssグラデーションジェネレーターによって生成できます。

.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))
    );   
}​

編集：

Roryが述べたように、CSS3はすべての最新のブラウザーで完全にサポートされているわけではありません。ただし、 IEが一部のCSS3機能を受け入れるのに役立つPIECSSなどのツールがいくつかあります。

于 2012-04-11T15:34:28.803 に答える
2

HTMLだけでグラデーションを作成することはできません。CSS3にはグラデーションを作成できる新機能がありますが、これらはすべてのブラウザーで完全にサポートされているわけではありません。

CSS3グラデーションについてもう少し読みたい場合は、この記事を読んでください

仕様のグラデーションを作成するためのCSSコードを作成する便利なオンラインツールもここにあります。

于 2012-04-11T15:33:38.547 に答える
1

外部シートでのスタイル設定は、特にスタイル シートにリンクするページが複数ある場合に、Web ページをスタイル設定するためのはるかに簡単、高速、かつ効率的な方法です。これにより、すべてのページのスタイル全体を 1 行のコードで同時に変更できます。それは問題ありませんが、単一のページを作成している場合や、単純なページだけで見た目を変える必要がある場合は、インライン スタイルで十分ですが、一般的ではありません。簡単な例については、以下を参照してください。

（各ページのインラインスタイリング）

<!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>

....または、このようになります

   <!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>

「yourcssheet.css」スタイルシートは次のようになります

/*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*/

個々のページ ヘッドのすべてのスタイルを確認する代わりに、次のようにリンクされた単純な外部シートを使用してすべてを変更することができます。

お役に立てれば。jhawk2k14@gmail.com

于 2014-04-23T04:52:59.467 に答える
0

これを使用http://www.colorzilla.com/gradient-editor/

CSS は別のスタイルシートに適用する必要があります... スタイルをインラインで適用しないでください。

于 2012-04-11T15:35:22.607 に答える