[英]How to overlay an image on other one with transperent effect using HTML-CSS
I want to overlay one image on other using CSS-PHP. 我想使用CSS-PHP在另一个图像上覆盖一个图像。 Please see the below HTML and CSS snippet and give ur wise suggestions: The images are present in header part of the division: j_logo.jpg and MMPHero3.jpg. 请参见下面的HTML和CSS代码段,并提出明智的建议:图像位于该部门的标题部分:j_logo.jpg和MMPHero3.jpg。 Of which former should be transparent and in left container while later one should occupy entire header region. 前者应该是透明的,并放在左容器中,而后者应该占据整个标头区域。
<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> </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"> </div>
</body>
</html>
CSS style-sheet is below: 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;
}
I believe you should set the style to be something like "position:absolute; left:100px; top:100px; opacity:0.3;" 我相信您应该将样式设置为“ position:absolute; left:100px; top:100px; opacity:0.3;” for the image element on top. 用于顶部的图像元素。
Use style="opacity:0.5;"
使用style="opacity:0.5;"
where opacity can be any val from 0.1 to 1 and for overlapping the img onto another you need to specify style="z-index:1;"
其中不透明度可以是0.1到1之间的任意值,并且要将img重叠到另一个上,您需要指定style="z-index:1;"
, the higher the z-index more priority will be given to it. ,z-index越高,优先级越高。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.