背景合成属性の詳細説明（前編）：background-image_html/css_WEB-ITnose

背景の複合属性は、多くのトリックを備えた非常に複雑な属性です。さらに驚くべきことは、CSS3

が複数の画像の背景をサポートしていることです。この記事では、最初に、background-image 属性について説明します。記事を要約します。

1. 最も基本的な状況は、画像の URL を背景として指定することです:

<style>  .parent{  height:200px; width:500px; border: 10px solid rgb(125, 125, 123); background-color: #bff; background-image:url(halfRombes.png);    }</style>

効果は次のとおりです (ブラウザのデフォルトの背景画像が繰り返しタイル表示されます):

2 番目: 背景としてグラデーションを指定します:

      background-image: linear-gradient(to left top, red, blue);

効果は次のとおりです (右下隅から左上隅、赤から青へ):

線形グラデーションに加えて、放射状グラデーションもあります。グラデーションは、中心から外側に広がるグラデーションです。最新のブラウザ (ie10+ を含む) でサポートされています。

長すぎるため、ここでは具体的な構文については説明しません。詳細な情報を得るために先に進んでください:

MDN#linear-gradient、

MDN#radial-gradient。

3. Base64 でエンコードされた画像:

この記事の最初の例の画像を例として挙げます:

画像の Base64 エンコードは次のとおりです:

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDPMUpFwJEce9yoIbHHg+usOxwocSznA87XmV2aH4rbbM3ENmVB5FdeXC3qcT3UEMS30EUjdgOTxH0Vrtri9j3uTwNEWIAAAAASUVORK5CYII="

をポイントします画像 URL を画像エンコーディングに追加すると、最初の例と同じ効果が得られます。

最新のブラウザのサポートは優れており、ie8+ はそれをサポートしています。base64 エンコードの特定のサポートは、base64 エンコードのブラウザサポート

base64 エンコードが data: で始まり、画像の種類を示していることがわかります。 as data :image/png; は、このエンコード文字列が png 画像であることを意味し、その後に 'base64; が続き、最後に画像のエンコード情報が続きます。

ところで、base64 とは何ですか?

Base64 は、バイナリ データを表す 64 個の印刷可能な文字に基づくエンコード方法であり、http 環境でより長い識別情報を送信するために使用できます。 Base64 は、一部のバイナリ データを表現、送信、保存するためによく使用されます。ピクチャもバイナリ データです。 (Base64 で印刷可能な文字には、文字 A ～ Z、a ～ z、数字 0 ～ 9 が含まれるため、合計 62 文字になります。他の 2 つの印刷可能な記号は、システムによって異なります。)

Base64 でエンコードされた画像の利点は次のとおりです。 小さい画像（タイル状の背景画像など）を単独で使用したい場合は、画像をbase64形式に変更してhttpリクエストを減らすことができます。

HTML5 の新機能を使用すると、他のツールに頼らずに画像の Base64 エンコードを取得できます。

1. 1 つのメソッドは、HTML5 FileReader オブジェクトの readAsDataURL() メソッドに基づいています。以下は読み込み入力アップロードです。 画像を表示して表示する例では、this.result は画像の Base64 エンコード情報です。

document.getElementById("file").onchange=function(){  var reader = new FileReader();  reader.readAsDataURL(this.files[0]);  reader.onload = function(e){  document.body.innerHTML = '<img src="'+this.result+'" alt="">'  }}<br />

2. もう 1 つの方法は、HTM5 Canvas で画像処理の toDataURL() メソッドを使用することです。前の記事では、Canvas を使用して画像データを処理する方法について説明しました:

canvas 学習メモ: Canvas のピクセル-画像のレベル処理 - ImageData のアプリケーション

記事内のコードを変更するだけで、画像をキャンバスに描画するだけで、画像データは変更せず、toDataURL() を通じて画像の Base64 エンコーディングを返すことができます。 。

4 番目に、最後に複数の画像の背景について説明します:

CSS3 安定版のドラフトでは、複数の画像の背景の仕様が策定されました: 複数の画像を設定するには、background-image 属性を「,」で区切ることができますURL 背景画像。

各画像の背景は背景レイヤーを作成し、複数の背景画像は複数のレイヤーを定義します。背景画像の画像リストの最初の画像はユーザーに最も近く、最後の画像はユーザーから最も遠い背景色よりも下にあり、境界色と境界線画像はより上にあります。最初の背景画像。PS のレイヤーの概念に似ています。

画像 (URI が無効など) を正常にロードできない場合、ブラウザは対応する背景画像の値を none (対応するレイヤーはまだ存在する) と判断し、画像が失われたことを示しますが、他の背景画像のレンダリングやプレゼンテーションには影響しません。ネットワークが不安定で背景画像を読み込めない可能性があるため、常にbackground-colorを指定する必要があります。

もちろん、最も懸念されるのはブラウザのサポートです。安心できるのは、chrome、firefox、ie9+、およびモバイル端末のブラウザがすべて複数の背景画像をサポートしていることです。

わかりました、ナンセンスがたくさんありますが、例はより直感的です:

次に、4 つの写真 (halfRombes.png、MicrobiaMat.png、Stairs.png、Stars.png) を使用し、順番に追加します。背景画像へ:

🎜

是的，background-position,background-origin,background-repeat等属性的值也要相应地进行设置，也是用","分隔开，一一对应声明的多张图片。如果某个属性设置了过多的值，则舍弃排在后面的多余的值；如果某个属性没有提供足够的值，就重复应用 该属性的值列表。效果如下：

咱们来逐条分析：

由于排在背景图片列表前面的图片会在上层，而后面的图片在下层，所以看到三角形的图在最上面，五角星的图在最下面。

position只给了3个值，所以后面的图会重复position列表的值，所以实际上是：left top, right bottom, right top, left top;

repeat只给了2个值，所以会重复该属性列表，实际上是：no-repeat, repeat, no-repeat, repeat;

其他背景属性值的应用规则同样如此。

有意思的是，background：inherit;（ie7-不支持）可以让元素继承父元素的背景属性，就连多图片背景也不例外哦（现代浏览器支持多图背景的继承，移动端更是妥妥的支持），下面是一个嵌套了div的例子，在上面例子中.parent容器嵌套一个.child容器，并对子容器应用如下样式：

    .child{      margin-top: 220px; /*为了让子容器显示在父容器下面，比较好比较*/      height: 200px;      background:inherit;  /*继承父元素的背景*/    }

结果是这样的：

当然，base64编码的图片也可以用于多图片背景，渐变也可以，甚至可以混用在一起！

pc端和移动端浏览器也能提供很不错的支持。

将上面的例子混在一起是这样的：

.parent{           height:200px;      width:500px;      border: 10px solid rgb(125, 125, 123);      background-color: #bff;        background-image:url(halfRombes.png), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAeCAYAAAAcni9KAAAAaElEQVQ4jcXTMQ4AEBAEQH/yJ69Vq31CTSWRC26dDcVVu1NtzvkQq+VcyuUDPMUpFwJEce9yoIbHHg+usOxwocSznA87XmV2aH4rbbM3ENmVB5FdeXC3qcT3UEMS30EUjdgOTxH0Vrtri9j3uTwNEWIAAAAASUVORK5CYII=), url(Stairs.png), linear-gradient(to left top, red, blue);     background-position: left top, right bottom, right top;      background-repeat: no-repeat, repeat-x;}

 

 

效果如下：

 

我承认这个图是很丑，但只是为了说明用法。这里有个使用多个渐变设置背景图案的一个网站，奥妙之处大家自己玩味，上面的图也是从这个网站借用来的：css3patterns

 

五：设置多图片背景混合模式：

当在一个容器同时指定了多个背景图片后，默认情况下，图片是按声明的图片顺序来一层层叠加显示，类似于ps中的图层的概念。默认情况下，如果上层的图片背景透明，那么可以看到下层的图片，如上层的图片不透明，那么就看不到下层的图片了。但是有个属性正好能用来定义多图背景的图片重叠显示方式，这个属性是：

background-blend-mode：[ normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn |   hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity ]

（对于各可能值的描述，这里有更详细的正式说明：MDN#blend-mode）

 

通过指定背景混合模式，能够让背景图片和背景颜色的重叠部分的颜色以一定的方式混合。

可以指定一种混合模式应用到所有背景图片，也可以逐个指定不同的混合模式，根据background-image声明的图片顺序依次设置。

ie浏览器和uc浏览器是不支持的，safari部分支持（不支持hue，saturation，luminosity，color）：浏览器对background-blend-mode支持情况。

 

当我对.parent容器应用：background-blend-mode:luminosity;

效果是这样的（safari不支持luminosity值）：

 

 

哈哈，由此可以知道background-blend-mode不能通过设置background：inherit被继承。

需要注意的是background-blend-mode还没纳入css候选推荐，但是浏览器支持情况已经很给力了。

 

不得不感慨，CSS真的是越来越强大了。

在文末，觉得还是有必要解开一个疑惑：

为什么url里面的值有人用引号包起来，有人不用引号包起来呢？

其实w3c对uri值的编码 ：http://www.w3.org/TR/2011/PR-CSS2-20110412/syndata.html#uri

规范原文是这么说的：

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.

括弧、空白文字、一重引用符 (')、二重引用符 (") など、引用符で囲まれていない URI に現れる一部の文字は、結果の URI 値が URI トークンになるようにバックスラッシュでエスケープする必要があります: '(', ')'.

中国語に翻訳: url() は、オプションの単一引用符または二重引用符をオプションのスペースで囲んでから、uri 自体をラップできます。 url() が uri を引用符でラップしない場合。 uri に括弧、スペース、一重引用符、または二重引用符が含まれている場合は、'' を使用してトランスコードする必要があります。たとえば、uri に '()' が含まれる場合は、次のようにトランスコードする必要があります: '(', ') ' .

つまり、url(a.png) は url(a.png) と同等、url('a.png) と同等、url("a.png") と同等、url("a .png")。

つまり、引用符なしは仕様に準拠しており、効果は最小限ですが、CSSファイルのサイズを減らすことができます。ブラウザによるこれの実装は、少し準拠しています。フリーク、彼を無視してください)

引用符を使用しないとセキュリティ上の問題が発生すると考える人もいますが、これは主に xss 攻撃によるものです。ただし、CSS ファイルは開発者自身によって作成されるため、信頼できないデータが URL に挿入されることはありません。もちろん、引用符は省略しても問題ありません

この記事は主に、background-image 属性について説明します

- --- -----------------------------転載の際は出典を明記してください^_^: