0

透かし

この透かしを組み込んだレイアウトの作成を依頼されました。左のポイントが左側のサイドバー DIV 内にあり、上部がバナー イメージに対して透過的であり、下部がコンテンツ DIV の背景イメージになるように配置する必要があります。

ここでjsFiddleごとにCSSで絶対配置を試みました:

 <!doctype html>
 <div id="all">
 <div id=leftside>
 </div><!-- leftside -->
 <div id="banner">       
 </div> <!-- banner -->
 <div id="rightside">
 <div id="rightinner">
   <h3>My Account</h3>
   <input type="text" id="Login"/>
   <input name="Go" type="button" id="btnLogin" value="Go"/><br/>
 </div>
 <!-- rightinner -->
 </div><!-- rightside -->
 <div id="nav">
   <ul>
     <li><a href="#">menu item1</a></li>
     <li><a href="#">Strategy &amp; Performance</a></li>
     <li><a href="#">Documents</a></li>
     <li><a href="#">Research &amp; Insights</a></li>
     <li><a href="#">Contact</a></li>
   </ul>
  </div><!-- nav -->
  <div id="content">

  </div><!-- content -->
  <div id="footer">
   <div id="leftfooter">
     &copy; my copyright
   </div><!-- leftfooter -->
   <div id="rightfooter">
     <a href="#">Privacy Notice</a>
   </div><!
  </div>
<!-- footer -->
</div> 
<!-- all -->

ただし、絶対配置では、透かしの断片を十分にぴったりと合わせることができません。 意図したバナー画像はこちら これは、透かしがヘッダー画像の一部としてスライスされているスライスの例です。

完成したホームページがどのように見えるかのモックアップを添付しました: モックアップ 透かし DIV が背景色の上で透明になり、左のバナーに表示されるようにするための最も CSS フレンドリーでレスポンシブなアプローチは何でしょうか?サイドバーとコンテンツ DIV?

UPDATE 4/1: CSSを次のように変更しました。

@charset "utf-8";
/* CSS Document */
body{
background-color: #003a63;
font-family: Calibri, Verdana, sans-serif;
font-size: 12pt;
width: 100%
}

html{
width:100%;
}

h3{
color: white;
}
#all {
width: 1024px;
}
#banner {
background-image: url(images/banner.png);
background-repeat: no-repeat;
height: 367px;
width: 815px;
position: absolute;
left: 232px;
top: 0px;
z-index: 999;
}

#watermarkCont{
background-color: #003a63;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 25;
}

#watermark{
background-image: url(images/ghwatermark.png);
width: 576px;
height: 517px;
position: absolute;
left: 50%;
margin-left: -200px;
z-index: 25;
}
#content {
background-image: url(../images/bgcontent.png);
background-repeat: no-repeat;
height: 454px;
width: 827px;
position: absolute;
left: 228px;
top: 412px;
background-color: #FFF;
z-index: 1;
}
#leftside {
height: 895px;
width: 220px;
position: absolute;
z-index: 1;
}
#rightside {
background-color: light-gray;
height: 957px;
width: 211px;
position: absolute;
left: 1050px;
top: 0px;
z-index: -25;
}
#nav {
background-color: #c7940d;
list-style-type: none;
font: Calibri;
font-size: 12pt;
font-weight: bold;
position: absolute;
left: 231px;
top: 368px;
width: 822px;
height: 42px;
margin: 0;
padding: 0;
z-index: 999;
}
#nav ul{
margin:0;
padding:0;
}

#nav ul li{
display: inline;
font-weight: bold;
color: #FFF;
}
#rightinner {
background-color: #003a63;
height: 130px;
width: 220px;
padding: 1px 1px 1px 1px;
}
#footer {
height: 105px;
wiedth: 833px;
position: absolute;
left: 227px;
top: 864px;
width: 825px;
color: #003a63;
background-image: url(images/footerbg.png);
}
#rightfooter {
float: right;
}
#leftfooter {
float: left;
width: 225px;
}

これは私が必要とするものに近いです。ただし、問題の要素の z-index 値を調整してモックアップのように見せる方法がわかりません。誰でも推奨値を提供できますか? 私の理解では、z-index 値が高いほど、「スタック」内の画像が高くなります。あれは正しいですか？

4

2 に答える 2

2

これは私の提案です：

body と html の幅を 100% にします。透かしコンテナのようなものと呼ばれる新しい Div を作成し、絶対位置で 100% の幅を与えます。その div 内で、別のウォーターマークと呼ばれるものを作成し、絶対位置を指定しますが、それを left:50% にしてから、負の左マージンを指定して、必要な正確な位置に配置できます。

これにより、画面サイズに関係なく、透かしが常に適切な場所に配置されます。

コードは次のとおりです。

body, html {
    width:100%;
}

#watermarkCont {
    width:100%;
    height:100%; //or if you want to just make this a px amount, it might not take 100% height
    position:absolute;
    top:0;
} 

#watermark {
    background-image:url("/*image*/");
    width: /*whatever the image width is*/;
    height: /*whatever the image height is*/;
    position:absolute;
    left:50%;
    margin-left:-200px;
}

このアプローチは、通常、絶対配置された要素を中央に配置するために使用されます。通常、負の左マージンは要素の幅の半分ですが、この場合はさらに左に押すことになるため、必要に応じてより大きな負の数にします。

配置した後、各要素に正しい z-index を指定すると、大きな透かしを切り取らずに所定の位置に収めることができます。

于 2013-03-31T17:37:47.303 に答える