CSSの画像
この章では、CSSレイアウトのイメージを使用する方法を紹介します。
フィレ写真
サムネイル
我々は、使用border
サムネイルを作成するには、プロパティを。
例
表示:インラインブロック;
国境: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>
»をお試しください
対応する画像
対応する画像は、自動的に画面サイズの様々なフィットします。
たとえば、あなたは効果の大きさを確認するようにブラウザをリセットすることができます。
あなたは、元の最大値よりも大きくないのサイズを拡大するには画像を拡大縮小する自由、と画像が必要な場合は、次のコードを使用することができます。
ヒント:Webコンテンツは、より応答性設計基準とすることができるCSSレスポンシブデザインのチュートリアル 。
画像のテキスト
画像テキストを検索する方法:
カード画像
例
幅: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%グレー)にすべての色を編集します。
-webkit-フィルタ:グレースケール(100% ); / *クロム、サファリ、オペラ* /
フィルター:グレースケール(100%)。
}
»をお試しください
ヒント:訪問CSSフィルタリファレンスマニュアルをより多くのコンテンツのために。
レスポンシブイメージギャラリー
例
パディング: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 = "なし";
}
»をお試しください