Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of Opaque Text inside Transparent Box</title> <style> div { float: left; opacity: 0.7; border: 1px solid #949781; } div img { display: block; } p { float: left; width: 340px; padding: 30px; color: #000000; font-size: 24px; position: relative; margin-left: -400px } </style> </head> <body> <div><img src="/examples/images/leaf.jpg" alt="Leaf"></div> <p>This paragraph has given negative margin as if it is appeared visually inside the div box though it is not.</p> </body> </html>
