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 个答案: