CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS Deursigtigheid / Deursigtigheid


Die opacityeienskap spesifiseer die ondeursigtigheid/deursigtigheid van 'n element.


Deursigtige beeld

Die opacityeiendom kan 'n waarde van 0.0 - 1.0 neem. Hoe laer waarde, hoe meer deursigtig:

Bos

ondeursigtigheid 0.2

Bos

ondeursigtigheid 0,5

Bos

ondeursigtigheid 1
(verstek)

Voorbeeld

img {
  opacity: 0.5;
}

Deursigtige hover effek

Die opacityeienskap word dikwels saam met die :hover kieser gebruik om die ondeursigtigheid te verander met muis-oor:

Noordeligte
Berge
Italië

Voorbeeld

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

Voorbeeld verduidelik

Die eerste CSS-blok is soortgelyk aan die kode in Voorbeeld 1. Daarbenewens het ons bygevoeg wat moet gebeur wanneer 'n gebruiker oor een van die beelde beweeg. In hierdie geval wil ons hê dat die beeld NIE deursigtig moet wees wanneer die gebruiker daaroor beweeg nie. Die CSS hiervoor is opacity:1;.

Wanneer die muiswyser wegbeweeg van die prent af, sal die prent weer deursigtig wees.

'n Voorbeeld van omgekeerde sweef-effek:

Noordeligte
Berge
Italië

Voorbeeld

img:hover {
  opacity: 0.5;
}


Deursigtige boks

When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Example

div {
  opacity: 0.3;
}

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:

100% opacity

60% opacity

30% opacity

10% opacity

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Tip: You will learn more about RGBA Colors in our CSS Colors Chapter.

Example

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

Text in Transparent Box

This is some text that is placed in the transparent box.

Example

<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;
}

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

<div class="background">
  <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

Example explained

First, we create a <div> element (class="background") with a background image, and a border.

Then we create another <div> (class="transbox") inside the first <div>.

The <div class="transbox"> have a background color, and a border - the div is transparent.

Inside the transparent <div>, we add some text inside a <p> element.


Test Yourself With Exercises

Exercise:

Use CSS to set the transparency of the image to 50%.

<style>
img {
  : ;
}
</style>

<body>
  <img src="klematis.jpg" width="150" height="113">
</body>