Bagaimana cara mengubah transparansi teks di HTML / CSS?

112

Saya sangat baru mengenal HTML / CSS dan saya mencoba menampilkan beberapa teks seperti 50% transparan. Sejauh ini saya memiliki HTML untuk menampilkan teks dengan opacity penuh

<html><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

Namun, saya tidak yakin bagaimana mengubah opasitasnya. Saya sudah mencoba mencari secara online, tetapi saya tidak yakin apa yang harus dilakukan dengan kode yang saya temukan.

html css opacity Nosrettap
sumber

Jawaban:

268

opacityberlaku untuk seluruh elemen, jadi jika Anda memiliki latar belakang, batas atau efek lain pada elemen itu, itu juga akan menjadi transparan. Jika Anda hanya ingin teksnya transparan, gunakan rgba.

#foo {
    color: #000; /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0.5);

    font-size: 16pt;
    font-family: Arial, sans-serif;
}

Juga, belok jauh, jauh dari <font>. Kami memiliki CSS untuk itu sekarang.

Mattias Buelens
sumber
8
Solusi yang jauh lebih unggul dibandingkan dengan jawaban yang diterima, IMO. Anda tidak perlu menambahkan elemen span tambahan ke HTML untuk menerapkan opasitas hanya pada teks.
kinsho
Inilah solusinya.
GhitaB
browser apa yang "tua" dalam pengertian ini?
Rick Davies
1
@RickDavies Menurut caniuse.com , IE9 atau lebih tinggi diperlukan. Jika Anda perlu mendukung IE8, Anda masih membutuhkan fallback. Jika tidak, Anda akan baik-baik saja dengan hanya rgba.
Mattias Buelens
Hmmmm, begitu juga dengan properti opacity. Wow.
trusktr
105

Centang Opacity , Anda dapat mengatur properti css ini ke div, <p>atau menggunakan <span>yang ingin Anda jadikan transparan

Dan omong-omong, tag font sudah usang , gunakan css untuk mengatur gaya teks

div {
    opacity: 0.5;
}

Edit: Kode ini akan membuat seluruh elemen menjadi transparan, jika Anda ingin membuat ** hanya teks ** transparan centang jawaban @Mattias Buelens

Mario Corchero
sumber
16
Gunakan <span>, Luke!
pilau
20
Jawaban ini salah. Kodenya membuat seluruh elemen (div) tembus cahaya. Pertanyaan hanya menentukan teks. Jawaban saudara yang dipilih lebih tinggi haruslah yang diterima.
Basil Bourque
Terima kasih. Ini sangat membantu saya menyembunyikan teks di template wordpress saya. Alih-alih (opacity: 0.5;) Saya baru saja menggunakan (opacity: 0;).
Marcielli Oliveira
17

Cukup gunakan rgbatag sebagai warna teks Anda. Anda bisa menggunakan opacity, tapi itu akan mempengaruhi seluruh elemen, bukan hanya teksnya. Katakanlah Anda memiliki perbatasan, itu akan membuatnya transparan juga.

.text
    {
        font-family: Garamond, serif;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.5);
    }
Harry Escott
sumber
9

Solusi terbaik Anda adalah melihat tag "opacity" dari sebuah elemen.

Sebagai contoh:

.image
{
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

Jadi dalam kasus Anda seharusnya terlihat seperti ini:

<html><span style="opacity: 0.5;"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></html>

Namun jangan lupa bahwa tag tidak didukung di HTML5.

Anda harus menggunakan CSS juga :)

MajuiF
sumber
5

Bagaimana dengan opacityatribut css ? 0untuk 1nilai - nilai.

Tapi kemudian Anda mungkin perlu menggunakan elemen dom yang lebih eksplisit daripada "font". Misalnya:

<html><body><span style=\"opacity: 0.5;\"><font color=\"black\" face=\"arial\" size=\"4\">THIS IS MY TEXT</font></span></body></html>

Sebagai informasi tambahan, saya tentu saja menyarankan Anda menggunakan deklarasi CSS di luar elemen html Anda, tetapi juga coba gunakan gaya font css alih-alih tag html font.

Untuk generator gaya css3 lintas browser, lihat di http://css3please.com/

Sebas
sumber
3

Mudah! setelah Anda:

    <font color=\"black\" face=\"arial\" size=\"4\">

tambahkan yang ini: 

    <font style="opacity:.6">

Anda hanya perlu mengubah ".6" untuk angka desimal antara 1 dan 0

pengguna3067297
sumber
3

Tidak ada properti CSS seperti background-opacity yang dapat Anda gunakan hanya untuk mengubah opacity atau transparansi latar belakang elemen tanpa mempengaruhi elemen turunan, sebaliknya jika Anda akan mencoba menggunakan properti opacity CSS, itu tidak hanya akan mengubah opasitas latar belakang tetapi juga mengubah opasitas semua elemen anak. Dalam situasi seperti itu, Anda dapat menggunakan warna RGBA yang diperkenalkan di CSS3 yang menyertakan transparansi alfa sebagai bagian dari nilai warna. Dengan menggunakan warna RGBA Anda dapat mengatur warna latar belakang serta transparansinya.

Aku di
sumber
2

mencoba bermain-main dengan mix-blend-mode: multiply;

color: white;
background: black;
mix-blend-mode: multiply;

MDN

tutorial

Dmitry Grinko
sumber