OPACITY, BACKGROUND AND COLORS

1. Opacity

mengatur tingkat transparansi elemen

opacity: 0.5;

• nilainya antara 0 - 1
• semakin rendah semakin transparan.
• mempengaruhi semua isi elemen, termasuk teks dan gambar

2. Background

memberi warna, gambar, atau efek visual pada elemen

Background Color

background-color: blue;

Background Image

background-image: url("image.jpg");

background-size: cover;
background-repeat: no-repeat;

Background Gradient

background: linear-gradient(red, yellow);

Background Position

background-position: center;

Background Attachment

background-attachment: fixed;

3. Colors

RGB

color: rgb(255, 0, 0);

HSL

color: hsl(200, 50%, 50%);

HEX

color: #ff0000;

Named Colors

color: blue;

Alpha Colors

transparansi warna saja

color: rgba(255, 0, 0, 0.5);
color: hsla(200, 50%, 50%, 0.4);

Opacity berbeda dengan rgba:

• opacity mempengaruhi seluruh elemen
• rgba hanya warna saja