CSS の背景画像関数を見てください。

この記事では、CSS の背景画像関数である url()、image()、image-set()、cross-fade()、element() について説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

[推奨チュートリアル: CSS ビデオ チュートリアル]

url()

url 関数はリソースを表します参照は、

background-image: url('./背景图片函数.png');
background-image: url('https://s3.ax1x.com/2020/11/29/DcV9VCSS の背景画像関数を見てください。');

image()

などのリンクおよび相対アドレスで渡すことができます。image 関数は URL に似ていますが、URL とは異なり、image には 機能を低下させる機能が備わっています 優雅に。たとえば、

background-image: image('a.webP','a.png','a.jpg');

このコードの意味は、ブラウザが webP 形式の画像をサポートしている場合は、a.webP を適用します。サポートしていない場合は、現在のブラウザに適応するまで a.png を再度テストします。残念ながら、この機能はまだドラフト段階にあります。

したがって、当分の間、この機能の他の機能には注意を払いません。興味のある学生は、MDN にアクセスして、より関連性の高い情報と最新の進捗状況を学ぶことができます。

image-set()

image-set は、さまざまな解像度のデバイス上で画像を確実に適応させ、さまざまなデバイスの種類に応じてさまざまな画像を表示できます。以下の例を参照してください

background-image: -webkit-image-set(url(./bg1x.png) 1x , url(./bg2x.png) 2x);

この例は、bg1x.png が 1x 画面に表示され、bg2x.png が 2x 画面に表示されることを意味します。互換性に関しては、現時点では最新の主流ブラウザでサポートされていますが、サポートしていないデバイスの場合は、互換性を確保するためにこの関数を使用する前に、background: url() を使用できます。

cross-fade()

cross-fade は、重なり合う 2 つの背景画像に透明度を適用するために使用されます。使用法は次のとおりです

background-image: -webkit-cross-fade(url('./bg1x.png'),url('./bg2x.png'),70%);

最初の 2 つのパラメータは画像のリソースの場所であり、後者のパラメータは透明度を示すパーセンテージを渡す必要があります。最後の画像を基準にしています。たとえば、パーセンテージが 0% の場合、最初の画像のみが表示されます。

パーセンテージが 100% の場合、2 番目の画像のみが表示されます。と表示されるはずです。

この属性は Firefox では完全に互換性がありませんが、Chrome と Safari では互換性がはるかに優れています

要素( )

element 関数は、Web サイト上の特定の要素を画像として使用できます。画像に適用される属性は、要素が適用されるオブジェクトにも適用されます。使用方法

element(id)

渡される必要があるのは ID です。以下の例を見てください。要素を使用して双方向バインディングと同様の機能効果を実現しています

      <p>
        <span>hello world</span>
      </p>

      <p></p>

//style
      .element-wrapper{
        width: 200px;
        height: 200px;
      }
      #element-test {
        width: 200px;
        height: 200px;
        background: -moz-element(#ele);
        background-size: contain;
        background-repeat: no-repeat;
      }

レンダリング

この属性は、さらに興味深い効果を実現することもできます。さらに興味深い効果は、ここで確認できます。互換性の点では、残念ながら、現在この属性をサポートしているのは Firefox だけです

#プログラミング関連の知識について詳しくは、

プログラミング ビデオをご覧ください。 ！

以上がCSS の背景画像関数を見てください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。