Latest web development tutorials

CSSの画像

この章では、CSSレイアウトのイメージを使用する方法を紹介します。

フィレ写真

例

フィレット画像：

IMG {
国境半径：8px;
}

»をお試しください

例

オーバル画像：

IMG {
国境半径：50％;
}

»をお試しください

サムネイル

我々は、使用borderサムネイルを作成するには、プロパティを。

例

IMG {
国境：1pxの固体#ddd。
国境半径：4PX。
パディング：5pxの;
}

<IMG SRC = "あるparis.jpg" ALT = "パリ">

»をお試しください

例

{
表示：インラインブロック;
国境：1pxの固体#ddd。
国境半径：4PX。
パディング：5pxの;
トランジション：0.3秒。
}

A：ホバー{
ボックスシャドウ：0 0 2ピクセル1ピクセルのRGBA
（0、140、186、0.5）。
}

<A HREF = "paris.jpg">
<IMG SRC = "あるparis.jpg" ALT = "パリ">
</ A>

»をお試しください

対応する画像

対応する画像は、自動的に画面サイズの様々なフィットします。

たとえば、あなたは効果の大きさを確認するようにブラウザをリセットすることができます。

ノルウェー

あなたは、元の最大値よりも大きくないのサイズを拡大するには画像を拡大縮小する自由、と画像が必要な場合は、次のコードを使用することができます。

例

IMG {
max-width：100％;
高さ：自動;
}

»をお試しください

ヒント：Webコンテンツは、より応答性設計基準とすることができるCSSレスポンシブデザインのチュートリアル 。

画像のテキスト

画像テキストを検索する方法：

例

ノルウェー
左下隅
左上角
右上隅
右下隅
センター

試してみてください：

左上隅>> »右上隅 、左下隅» 右下隅>> センター>>

カード画像

例

div.polaroid {
幅：80％;
背景色：白;
ボックスシャドウ：0 4PX 8px 0 RGBA（0、0、0、0.2）、0 6px 20ピクセル0 RGBA（0、0、0、0.19）;
}

IMG {幅：100％}

div.container {
テキスト整列：センター;
パディング：10pxの20ピクセル;
}

»をお試しください

画像フィルタ

CSS filter属性は、視覚効果（：ファジィと彩度など）を持つ要素を追加します。

注：Internet Explorerの 、またはサファリ5.1（およびそれ以前のバージョン）は、このプロパティをサポートしていません。

例

黒と白の写真（100％グレー）にすべての色を編集します。

IMG {
-webkit-フィルタ：グレースケール（100％ ）; / *クロム、サファリ、オペラ* /
フィルター：グレースケール（100％）。
}

»をお試しください

ヒント：訪問CSSフィルタリファレンスマニュアルをより多くのコンテンツのために。

レスポンシブイメージギャラリー

例

.responsive {
パディング：0 6px;
フロート：左;
幅：24.99999%。
}

唯一の画面と@media（最大幅 ：700px）{
.responsive {
幅：49.99999%。
マージン：6px 0;
}
}

唯一の画面と@media（最大幅 ：500pxなど）{
.responsive {
幅：100％;
}
}

»をお試しください

写真モーダル（モーダル）

この例では、画像をレンダリングするためにCSSとJavaScriptを一緒に結合する方法を示しています。

まず、我々はモーダルウィンドウ（ダイアログ）を作成するためにCSSを使用し、デフォルトでは非表示になっています。

我々は、我々は、画像がポップアップウィンドウに表示されますクリックすると、モーダルウィンドウを表示するにはJavaScriptを使用します。

例

//モーダルウィンドウを取得
VARモーダル=のdocument.getElementById（ 'myModal' ）;

現在の中国のポップで説明したように//額縁モードを取得し、代替画像の属性
するvar IMG =のdocument.getElementById（ 'myImg' ）;
VAR modalImg =のdocument.getElementById（ "img01" ）;
VAR captionText =のdocument.getElementById（ "キャプション" ）;
img.onclick =関数（）{
modal.style.display = "ブロック"。
modalImg.src = this.src。
modalImg.alt = this.alt。
captionText.innerHTML = this.alt。
}

// <span>の要素を取得モーダルを閉じを
VARスパン= document.getElementsByClassName（ "クローズ" ）[0];

//ユーザーは、<スパンをクリックすると （x）は、モーダルを閉じます>
span.onclick =関数（）{
modal.style.display = "なし";
}

»をお試しください