CSS'te opacity Özelliği ile Yarı Saydamlık

Bir öğenin yarı saydamlığı opacity özelliği ile de ayarlanabilir. Bu özellik de 0'dan 1'e kesirli değerler alır. Bu durumda, yarı saydamlık öğenin tamamına aynı anda uygulanır: metnine, arka planına ve kenarlığına.

Örneğe bakın:

html<div id="parent">
  <div id="elem">
    Lorem ipsum dolor sit amet.
  </div>
</div>

css#parent {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  padding: 30px;
}
#elem {
  width: 300px;
  height: 200px;
  padding: 10px;
  font-size: 50px;
  font-weight: bold;
  
  border: 20px solid red;
  background: black;
  color: red;
  
  opacity: 0.7;
}

Результат: