CSS Opacitate / Transparență. Text în Box Transparent.

Text în Box Transparent

Exemplu:

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>Acesta este un text care este plasat în caseta transparentă.</p>
  </div>
</div>

</body>
</html>

Mai întâi, creăm un element <div> (class = "background") cu o imagine de fundal și un chenar. Apoi, creăm un alt <div> (class = "transbox") în interiorul primului <div>. <div class = "transbox"> au o culoare de fundal, iar o margine - div este transparentă. În interiorul <div> transparent, adăugăm text în interiorul unui element <p>.