CSS画像
この章では、CSSを使用して画像をレイアウトする方法を紹介します。
丸い角の画像
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img {
border-radius: 8px;
}
</style>
</head>
<body>
<h2>圆角图片</h2>
<p>使用 border-radius 属性来创建圆角图片:</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>インスタンスを実行する»
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>椭圆形图片</h2>
<p>使用 border-radius 属性来创建椭圆形图片：</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html>Rインスタンス»
クリック「インスタンスの実行」ボタンをクリックしてオンラインの例を表示します。
サムネイル
サムネイルを作成するには border 属性を使用します。例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
</style>
</head>
<body>
<h2>缩略图</h2>
<p>我们使用 border 属性来创建缩略图。</p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
</body>
</html> 例の実行 »
オンライン インスタンスを表示するには、「例の実行」ボタンをクリックしてください
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>
<h2>缩略图作为连接</h2>
<p>我们使用 border 属性来创建缩略图。在图片外层添加一个链接。</p>
<p>点击图片查看效果：</p>
<a target="_blank" href="paris.jpg">
<img src="paris.jpg" alt="Paris" width="400" height="300">
</a>
</body>
</html>例では、ブラウザのサイズをリセットすることで効果を確認できます:
画像を自由に拡大縮小する必要があり、画像の拡大サイズが元の最大値を超えない場合は、次のコマンドを使用できます。次のコード:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>响应式图片</h2>
<p>响应式图片会自动适配各种尺寸的屏幕。</p>
<p>通过重置浏览器大小查看效果:</p>
<img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
</body>
</html>例の実行»
[例の実行] ボタンをクリックしてオンラインの例を表示します
ヒント:
Web レスポンシブ デザインの詳細については、以下を参照してください。 CSS レスポンシブ デザイン チュートリアル。
画像テキスト画像テキストの配置方法:
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.container {
position: relative;
}
.topleft {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片左上角添加文本信息:</p>
<div class="container">
<img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="topleft">左上角</div>
</div>
</body>
</html>スタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片右上角添加文本信息:</p>
<div class="container">
<img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="topright">右上角</div>
</div>
</body>
</html> サンプルの実行 »
R
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.container {
position: relative;
}
.bottomleft {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片左下角添加文本信息:</p>
<div class="container">
<img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="bottomleft">左下角</div>
</div>
</body>
</html>Eインスタンスの実行»
オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください
カードスタイルの画像
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.container {
position: relative;
}
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片右下角添加文本信息:</p>
<div class="container">
<img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="bottomright">右下角</div>
</div>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックして表示しますオンライン インスタンス
画像フィルター
CSS filter プロパティは、要素に視覚効果 (ぼかしや彩度など) を追加するために使用されます。
注: この属性は、Internet Explorer または Safari 5.1 (およびそれ以前) ではサポートされていません。
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>图片文本</h2>
<p>在图片中间位置添加文本信息:</p>
<div class="container">
<img src="http://www.php.cn/wp-content/uploads/2016/04/trolltunga.jpg" alt="Norway" width="1000" height="300">
<div class="center">居中</div>
</div>
</body>
</html>サンプルの実行 »
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
ヒント:詳細については、CSSフィルターリファレンスマニュアルを参照してください。
レスポンシブピクチャアルバム
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body {margin:25px;}
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
</head>
<body>
<h2>响应式卡片</h2>
<div class="polaroid">
<img src="rock600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div>
<div class="polaroid">
<img src="lights600x400.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>Northern Lights in Norway</p>
</div>
</div>
</body>
</html>サンプルの実行»
オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください
画像モーダル(モーダル)
この例は、結合方法を示します。画像を一緒にレンダリングするための CSS と JavaScript。
まず、CSS を使用して、デフォルトでは非表示になっているモーダル ウィンドウ (ダイアログ) を作成します。
次に、JavaScript を使用してモーダル ウィンドウを表示します。画像をクリックすると、ポップアップ ウィンドウに画像が表示されます。
インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
img {
width: 33%;
height: auto;
float: left;
max-width: 235px;
}
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
</style>
</head>
<body>
<p><strong>注意:</strong> Internet Explorer <span lang="no-bok">或 Safari 5.1 (及更早版本)</span> 不支持该属性。</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="blur" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="brightness" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="contrast" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="grayscale" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="huerotate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="invert" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="opacity" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="saturate" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="sepia" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<img class="shadow" src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>インスタンスを実行»
「インスタンスを実行」ボタンをクリックしてオンライン例を表示します
