如何使用 HTML-CSS 将图像覆盖在另一个具有透明效果的图像上 - How to overlay an image on other one with transperent effect using HTML-CSS

How to overlay an image on other one with transperent effect using HTML-CSS

我想用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;
    }

我相信您应该将样式设置为"位置：绝对;左：100px;顶部：100px;不透明度：0.3;" 表示顶部的图像元素。

使用不透明度可以是 0.1 到 1 的任何值的style="opacity:0.5;"并且要将 img 重叠到另一个 img 上，您需要指定 style="z-index:1;" ，z 索引越高，优先级越高。