CSS タイリングの問題_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS タイリングの問題_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:42:37

オリジナル

1366 人が閲覧しました

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <style type="text/css">	  .panel-header{		width:100px;		height:30px;		background-image: url('corners-sprite.gif'); 		background-repeat: repeat-x; 	  }  </style> </head> <body>  <div class="panel-header"></div> </body></html>

ログイン後にコピー

-----------------------------
結果:
こうなるといいですね
どうすればいいですか?元画像です

ディスカッションへの返信（解決策）

背景だけでこんな風に作るのは無理だとずっと思ってました！
それでは、私が提供したコードを見てください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title>  <style type="text/css">      .panel-header{        width:100px;        height:30px;      }	  .s{ width:8px; float:left;        height:30px;		border:0px;		background-image:url(1365855364_1272.gif); 		background-repeat:no-repeat;		background-position:-2px 0px;	}  </style> </head>  <body>  <div class="panel-header">  	<div class="s"></div>    <div class="s"></div>    <div class="s"></div>    <div class="s"></div>    <div class="s"></div>    <div class="s"></div>    <div class="s"></div>    <div class="s"></div>    <div class="s"></div>    <div class="s"></div>    <div class="s"></div>  </div> </body></html>

ログイン後にコピー

元の画像を並べて表示できる1ピクセル幅の画像に変更します

CSS3は枠線画像の9マスパズルをサポートしていますが

この枠線のあるものは、通常は幅のある短冊にする必要があります画面の幅を超える場合は、これを上のレベルのコンテナに置き、次に最初のコンテナを下のレベルに置きます。今度は左側に置きます。詳細については、引き戸効果を参照してください。

画像に問題があります。幅を 1 ピクセルにしてから並べてください。

写真のカットに問題があると思います。このようにカットすると、スタイル全体が切り取られます。