clip:rectの設定サンプル

サンプル:花1 サンプル:花2 サンプル:花3 サンプル:花4
画像だけでなくテキストを切り抜くことも可能です。
スタイルシート
h1  { clip:rect(5px,auto,auto,auto); position: absolute; top:5px; left:150px;
      background-color: #cfc }
img { position: absolute; top: 80px; width: 200; height: 175}
img#test1 { clip:rect(9px,160px,142px,5px); left: 265px }
img#test2 { clip:rect(80px,199px,174px,54px); left: 450px }
img#test3 { clip:rect(80px,auto,auto,auto); left: 625px }


HTMLコード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<title>Sample</title>
</head>

<body>
<h1 style="text-align:center">clip:rectの設定サンプル</h1>
<div>
<img src="hana.png" alt="サンプル:花1">
<img src="hana.png" alt="サンプル:花2" id="test1">
<img src="hana.png" alt="サンプル:花3" id="test2">
<img src="hana.png" alt="サンプル:花4" id="test3">
</div>

</body>
</html>

BackPage