Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> <style> * { box-sizing: border-box; } body { background-color: #eee; color: #555; font-size: 1.1em; font-family: Roboto, Helvetica, Arial, sans-serif; } .isolation-example { margin: 1em auto; width: 100%; max-width: 814px; position: relative; } img { width: 100%; } .isolation-example h1 { position: absolute; top: 5em; color: white; text-align: center; font-size: 40px; width: 100%; text-transform: uppercase; background-color: #000; padding: .5em .25em; mix-blend-mode: overlay; } </style> </head> <body> <h2>Пример свойства isolation</h2> <div class="isolation-example"> <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg" alt="Yellow tree."> <div class="element"> <h1>House</h1> </div> </div> </body> </html>