ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS タイリングの問題_html/css_WEB-ITnose
CSS タイリングの問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:42:371365ブラウズ
<!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 ピクセルにしてから並べてください。
写真のカットに問題があると思います。このようにカットすると、スタイル全体が切り取られます。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。