私はこれに対する答えをどこでも探しました。div と css を使用してコーディングしようとしているデザインがあります。画像の上半分には、左から右に異なる色のグラデーションがあります。私が見つけている問題は、それを半分ずつ行うことができ、最終的に画像を中央に配置することができましたが、その一部が背景の下に隠れていることです.
(http://pretty-senshi.com/final-final.html) ←これまでのデザインサンプル
http://pretty-senshi.com/original.png ←オリジナルデザイン
http://pretty-senshi.com/gradient.png <-- X 軸のみで繰り返す必要がある背景グラデーション。
<html> <LINK href="style.css" type=text/css rel=stylesheet> </head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container"><div id="rightHalf">
</div><center><img src="images/Final-Final_02.png" id="picture"></center>
<div id="header2">
</div>
</div>
</div></div>
CSS は次のとおりです。
@charset "UTF-8";
/* CSS Document */
body {background: url(images/final-final_01.png);
background-repeat:repeat-x;}
div#container {
width:100%;}
picture {z-index: 999;}
#rightHalf {
background: url(images/final-final_03.png);
background-repeat:repeat-x;
width: 50%;
position: absolute;
right: 0px;
height: 100%;
z-index: 1;
}