讓一半圖片透明方便加入註記

by wllai2001

HTML

<div class="parent">
    <div id="opacity_div"></div>
    <div class="title">可愛車車</div>
    <img class="half_fade" src="https://truth.bahamut.com.tw/s01/202104/b8e4362e46c215f291f4952a480dd18d.JPG">
</div>

CSS

div.title , #opacity_div{
   height:100px;
   width:200px;
   position:absolute;
   top:74px;
   left:0px;  
}
#opacity_div{
   background:#fff;  
   opacity:0.5;/* manipulate to desired opacity */
   
}
div.title{
   text-align:center;
   line-height: 82px;
   font-size:24px;
   font-weight:800; 
   
}
img.half_fade {
  width:200px;
   position:absolute;
   top:0;left:0;
   z-index:-1000;
}