How to overlay an image on other one with transperent effect using HTML-CSS
Question
I want to overlay one image on other using 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. 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:
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;
}
2 answers
solution1
0 2013-11-07 13:01:25
I believe you should set the style to be something like "position:absolute; left:100px; top:100px; opacity:0.3;" for the image element on top.
solution2
0 2013-11-07 13:08:31
Use 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;" , the higher the z-index more priority will be given to it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.