---
id: 61b093179e7fc020b43b1bb3
title: Hatua ya 73
challengeType: 0
dashedName: step-73
---

# --description--

<dfn>Opacity</dfn> inaeleza jinsi kitu kilivyo giza, au kisicho wazi. Kwa mfano, ukuta imara ni opaque, na hakuna mwanga unaweza kupita. Lakini glasi ya kunywa ni ya uwazi zaidi, na unaweza kuona kupitia glasi hadi upande mwingine.

Ukiwa na sifa ya CSS ya `opacity`, unaweza kudhibiti jinsi kipengele kilivyo giza au uwazi. Kwa thamani `0`, au 0%, kipengele kitakuwa wazi kabisa, na kwa `1.0`, au 100%, kipengele kitakuwa opaque kama kilivyo kwa chaguomsingi.

Katika sheria ya CSS ya `.sleeve`, ongeza `opacity` yenye thamani ya `0.5`.

# --hints--

Sheria yako ya CSS ya `.sleeve` inapaswa kuwa na sifa ya `opacity` iliyowekwa kuwa `0.5`.

```js
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
        <div class="sleeve"></div>
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

--fcc-editable-region--
.sleeve {
  width: 110px;
  height: 25px;
  background-color: white;
}
--fcc-editable-region--

.red {
  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
}

.green {
  background: linear-gradient(#55680D, #71F53E, #116C31);
}

.blue {
  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
}

```
