HTML Element Style How to - Create text in transparent box

Question

We would like to know how to create text in transparent box.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
div {<!--from ww w .j  a  va 2s  .  c o m-->
  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="http://placehold.it/200x200" 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>

The code above is rendered as follows: