Kursus IT Dasar CSS 023_Gambar, Latar Belakang

Gambar

Gambar adalah jenis media yang sangat penting dalam halaman web. Penggunaan gambar yang tepat dapat membuat halaman web menjadi berwarna dan hidup, tidak lagi terbatas pada teks yang dingin.

Tata Letak Gambar

Elemen img secara default adalah elemen inline dan memiliki margin default 5px. Dengan mengaturnya sebagai elemen blok, satu baris hanya dapat menampilkan satu gambar. Dengan mengaturnya sebagai elemen inline, beberapa gambar dapat ditampilkan dalam satu baris. Untuk memposisikan elemen blok digunakan properti margin, untuk memposisikan elemen inline digunakan properti text-align.

Contoh:

1
<img src="zhaojian1.jpg" alt="" >
2
<img src="zhaojian1.jpg" alt="" >
3
<img src="zhaojian1.jpg" alt="" >
4
<img style="display: block;" src="zhaojian1.jpg" alt="" >
5
<img style="display: block;" src="zhaojian1.jpg" alt="" >
6
<img style="display: block;margin: 0 auto;" src="zhaojian1.jpg" alt="" >

Efek:

Transparansi Gambar

Dalam CSS, Anda dapat menggunakan properti opacity untuk mengatur transparansi elemen (termasuk gambar). Properti ini menerima nilai dalam rentang 0 (sepenuhnya transparan) hingga 1 (sepenuhnya tidak transparan).

Jika Anda hanya ingin membuat latar belakang gambar transparan tanpa memengaruhi konten, Anda dapat menggunakan nilai warna RGBA.

Contoh:

1
<img src="zhaojian1.jpg" alt="" >
2
<img style="opacity: 0.5;" src="zhaojian1.jpg" alt="" >

Efek:

Sudut Bulat Gambar

Dalam CSS, Anda dapat menggunakan properti border-radius untuk menambahkan sudut bulat pada gambar. Properti ini digunakan untuk mengatur tingkat kelengkungan sudut border elemen.

Contoh:

1
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" >
2
<!-- Mengatur radius sudut bulat, dapat disesuaikan sesuai kebutuhan -->
3
<img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" >
4
<!-- Radius horizontal 20px, radius vertikal 10px -->
5
<img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" >
6
<!-- Kiri atas 10px, kanan atas 20px, kanan bawah 15px, kiri bawah 5px -->

Efek:

Bayangan Gambar

Dalam CSS, Anda dapat menggunakan properti box-shadow untuk menambahkan efek bayangan pada gambar. Properti ini memungkinkan Anda menambahkan efek proyeksi, termasuk warna bayangan, radius blur, offset, dll.

Contoh:

1
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" >
2
<br><br>
3
<!-- Offset horizontal 5px, offset vertikal 5px, radius blur 10px, warna bayangan hitam semi-transparan -->
4
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.7) inset;" src="zhaojian1.jpg" alt="" >
5
<!-- Bayangan luar dan bayangan dalam, gunakan kata kunci inset untuk menentukan bayangan dalam -->

Efek:

Latar Belakang

Dalam CSS, latar belakang adalah salah satu gaya yang umum digunakan dalam desain web, digunakan untuk mengatur gaya latar belakang elemen.

Warna Latar Belakang

Warna latar belakang elemen diatur melalui properti background-color.

Contoh:

1
    .example1 {
2
        background-color: #f0f0f0;
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

Efek:

Gambar Latar Belakang

Gambar latar belakang elemen diatur melalui properti background-image. Dapat menggunakan path relatif, path absolut, atau URL.

Contoh:

1
    .example1 {
2
        background-image: url('zhaojian.jpg');
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

Efek:

Pengulangan Latar Belakang (Tiling)

Properti background-repeat mengatur mode pengulangan gambar latar belakang, bisa secara horizontal, vertikal, di kedua arah, atau tanpa pengulangan.

• repeat: Gambar diulang secara horizontal dan vertikal (default)
• repeat-x: Gambar diulang secara horizontal
• repeat-y: Gambar diulang secara vertikal
• no-repeat: Gambar hanya ditampilkan sekali

Contoh:

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        background-repeat: no-repeat;
8
    }
9
    .example2 {
10
        background-repeat: repeat-x;
11
    }
12
    .example3 {
13
        background-repeat: repeat-y;
14
    }

1
    Tanpa pengulangan
2
    <div class="base example1"></div>
3
    Pengulangan horizontal
4
    <div class="base example2"></div>
5
    Pengulangan vertikal
6
    <div class="base example3"></div>

Efek:

Ukuran Latar Belakang

Properti background-size mengatur ukuran gambar latar belakang, bisa dalam nilai piksel konkret, persentase, atau menggunakan kata kunci seperti cover atau contain.

• Default: Menampilkan gambar latar belakang asli secara lengkap.
• auto: Gambar diskalakan secara proporsional sebagai latar belakang, gambar akan diulang secara tiling.
• cover: Gambar diperluas hingga menutupi seluruh area, mempertahankan proporsi. Gambar mungkin tidak ditampilkan secara lengkap, dengan bagian yang terpotong.
• contain: Gambar diskalakan sebesar mungkin sambil mempertahankan rasio aspek, sehingga tinggi atau lebar sepenuhnya sesuai dengan area latar belakang. Penskalaan dapat menyebabkan area kosong pada latar belakang, di mana area kosong container akan menampilkan warna latar belakang yang diatur oleh background-color.

Contoh:

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        background-image: url('zhaojian.jpg');
7
        background-size: auto;
8
    }
9
    .example2 {
10
        background-image: url('zhaojian2.jpg');
11
        background-size: cover;
12
    }
13
    .example3 {
14
        background-image: url('zhaojian2.jpg');
15
        background-size: contain;
16
    }
17
    .example4 {
18
        background-image: url('zhaojian2.jpg');
19
        background-size: 50% 100%;
20
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>
6
    <br>
7
    <div class="base example4"></div>

Efek:

Posisi Latar Belakang

Properti background-position mengatur posisi awal gambar latar belakang, dapat menggunakan nilai piksel, persentase, atau kata kunci.

• Dapat menggunakan satuan panjang apa pun, jika posisi kedua (arah sumbu Y) tidak dideklarasikan, nilai defaultnya adalah 50% (jika kedua posisi tidak diatur, nilai defaultnya adalah 0% 0%)
• Kata kunci posisi (left/right/top/bottom/center), dapat digunakan tunggal atau berpasangan (jika kata kunci kedua tidak dideklarasikan, nilai defaultnya adalah center)
• Penggunaan campuran

Contoh:

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        background-repeat: no-repeat;
4
        background-color: #d6d7d8;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example1 {
9
        background-position: center top;
10
    }
11
    .example2 {
12
        background-position: 50% 50%;
13
    }
14
    .example3 {
15
        background-position: 50% bottom;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Efek:

Pelekatan Latar Belakang (Fiksasi)

Properti background-attachment mengatur apakah gambar latar belakang tetap atau bergulir bersama konten.

• scroll: Gambar latar belakang bergerak mengikuti guliran halaman (default)
• fixed: Gambar latar belakang tidak bergerak mengikuti guliran halaman
• local: Gambar latar belakang bergulir mengikuti konten elemen

Contoh:

1
.example1 {
2
  background-attachment: scroll;
3
}
4
.example2 {
5
  background-attachment: fixed;
6
}
7
.example3 {
8
  background-attachment: local;
9
}

Efek:

Singkatan Latar Belakang

Properti background dapat ditulis secara singkat, yang jauh lebih ringkas daripada mendeklarasikan sub-properti satu per satu dan menghemat banyak kode. Karena background memiliki banyak sub-properti, urutan penulisan singkat juga menjadi tantangan. CSS2 merekomendasikan aturan urutan penulisan singkat berikut:

Contoh:

1
.example1{
2
  background: color image repeat attachment position/size;
3
}
4

5
.example2{
6
  background: #ffffff url('img_tree.png') no-repeat right top;
7
}