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 -->

但是，绝对定位不允许我将水印的各个部分足够紧密地结合在一起。 此处的预期横幅图片 这是一个示例切片，其中水印被切片为标题图像的一部分。

我附上了一个完整主页应该是什么样子的模型： 小样 什么是最友好的 CSS 和响应式方法，以确保水印 DIV 在背景颜色的顶部是透明的，并且可以在左侧的横幅中看到侧边栏和内容 DIV？

更新 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 中，创建另一个称为 watermark 并给它一个绝对位置，但是你可以给它一个 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 回答
0 
background-image: url(/Content/Images/logo.png);
background-repeat: no-repeat;
height: 560px;/* height of page */
background-position: 50% 50%;
background-size: 300px 300px; /* width height of Image */
padding: 16px; /* as per need */
于 2019-02-02T18:31:18.283 回答