Text background color overlay multiply on another image - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text

Description

Text background color overlay multiply on another image

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.container {<!--  w  w  w . ja va2  s. com-->
   position:relative;
   padding:3em;
   line-height:3;
   border:2px solid Chartreuse;
   background:yellow;
}

p {
   margin:0;
}

.clone {
   position:absolute;
   top:3em;
   left:3em;
   right:3em;
}

span {
   position:relative;
   z-index:2;
   padding:.26em 2em;
   -webkit-box-decoration-break:clone;
   box-decoration-break:clone;
   color:blue;
}

.clone span {
   z-index:0;
   color:pink;
   background:red;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <p> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed </span> </p> 
   <div class="clone"> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed </span> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials