如何使用HTML-CSS在另一幅圖像上疊加效果

Question

我想使用CSS-PHP在另一個圖像上覆蓋一個圖像。 請參見下面的HTML和CSS代碼段，並提出明智的建議：圖像位於該部門的標題部分：j_logo.jpg和MMPHero3.jpg。 前者應該是透明的，並放在左容器中，而后者應該占據整個標頭區域。

 <body>

 <div id="container">

    <div id="header">
            <div id="header-left-container">
                    <img src="j_logo.jpg" alt="jubilant"/>
            </div>
            <div id="header-right-container">
                    <img src="MMPHero3.jpg" alt="drug"/>

            </div>
  </div>

   <div id="content"> Sidebar <p> &nbsp; </p>
 <div class="form">


    <p>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
    <p>Enter Drug Name </p>
    <input type="text" name="drugName" value="<?php echo  (isset($_POST['drugName']) ? $_POST['drugName'] : '') ?>"> 

<!--To retain search query after click added value="<?php echo  (isset($_POST['drugName']) ? $_POST['drugName'] : '') ?>*/-->
<!-- This is commenting style in HTML -->

<p><input type="submit" value="search"></p>
    </form>
</div>
   </div>



   <div id="sidebar"> Body
 </div>
 <div id="footer"> &nbsp; </div>
 </body>
 </html>

CSS樣式表如下：

 body {background: #ffffff;}
 a {color: #2b2bf6;}
 h1 {font-size: 30px;}

 #container
 {width:1000px;
 margin: 0 auto;
 background: #dddddd;}

 #header
 {height: 150px;
  margin: 0px;
  padding: 0px;
  background: #FFFFA3;}

  #header-right-container img
  {border:none;
   width:80%;
   height:150px;
   float: right;}

  #header-left-container
  {width:20%;
  float: left}

  #header-left-container img
  {border:none;
  width:100%;
  height:150px auto;
  float: left;}
  #sidebar
  {
   position:relative;
   width: 80%;
     height: 400px;
   float:right;
   background: #FFFFA3; ;}
   #content
   {
    position:relative;
    width: 20%;
    height: 400px;
    float: left;
    background: #f0e811;;}
    #footer
    {width: 100%;
     height: 70px;
     float: left;
     background: #000000;
    div.result
    {
width:88%;
padding:5%;
border:5px solid gray;
margin:5px;
align:center;
    }
    div.form
    {
    width:180px;
    padding:5%;
    border:5px solid gray;
    margin:50px;
    align:center;
    float:right;
    }
    table, td, th
    {
border:0.5px solid blue;
align:center
    }
    th
    {
background-color:#3886FC;
color:white;
    }

Answer 1

我相信您應該將樣式設置為“ position：absolute; left：100px; top：100px; opacity：0.3;” 用於頂部的圖像元素。

Answer 2

使用style="opacity:0.5;" 其中不透明度可以是0.1到1之間的任意值，並且要將img重疊到另一個上，您需要指定style="z-index:1;" ，z-index越高，優先級越高。

如何使用HTML-CSS在另一幅圖像上疊加效果

問題描述

2 個解決方案

解決方案1
0 2013-11-07 13:01:25

解決方案2
0 2013-11-07 13:08:31

如何使用HTML-CSS在另一幅圖像上疊加效果

問題描述

2 個解決方案

解決方案1 0 2013-11-07 13:01:25

解決方案2 0 2013-11-07 13:08:31

解決方案1
0 2013-11-07 13:01:25

解決方案2
0 2013-11-07 13:08:31