<!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>
Источник