Bagaimana cara membuat formulir html transparan?

Question

Jika Anda ingin kotak dan semua isi kotak diubah opasitasnya, maka properti CSS opacity adalah alat untuk meraihnya. Opacity adalah kebalikan dari transparansi;

Table of Contents Show

Desainer Formulir
Desainer Tingkat Lanjut
Kode CSS Kustom
Apakah ada kode HTML untuk transparan?
Bagaimana cara membuat latar belakang formulir menjadi transparan?
Bagaimana cara membuat PNG transparan dalam HTML?
Bagaimana cara membuat bidang teks transparan dalam HTML?

Menggunakan nilai 0_ akan membuat kotak benar-benar transparan, dan nilai di antara keduanya akan mengubah opacity, dengan nilai yang lebih tinggi memberikan transparansi yang lebih sedikit

Dalam banyak kasus, Anda hanya ingin membuat warna latar belakang itu sendiri sebagian transparan, menjaga agar teks dan elemen lainnya sepenuhnya buram. Untuk mencapainya, gunakan nilai warna yang memiliki saluran alfa—seperti. Seperti opacity, nilai 1 untuk nilai saluran alfa membuat warna sepenuhnya buram. Oleh karena itu background-color: rgba(0,0,0,.5); akan mengatur warna latar belakang menjadi 50% opacity

Coba ubah nilai opacity dan alpha channel pada contoh di bawah ini untuk melihat lebih banyak atau lebih sedikit gambar latar belakang di balik kotak

Catatan. Berhati-hatilah agar teks Anda mempertahankan kontras yang cukup dengan latar belakang jika Anda melapisi gambar;

Membuat latar belakang formulir Anda transparan adalah cara termudah untuk memadukan formulir Anda ke dalam desain situs web Anda

Di dalam Pembuat Formulir, Anda dapat mengubah latar belakang formulir menggunakan metode berikut

Desainer Formulir

Cara termudah untuk mengubah transparansi formulir Anda adalah melalui Desainer Formulir

Klik ikon Desainer Formulir di bagian kanan atas Pembuat Formulir

Di tab Warna, klik kotak Warna Formulir
Klik ikon X dari pilihan warna yang ditampilkan di kotak Form Color

Pro-Tip
Anda juga dapat mengetik "transparan" di kotak Warna Formulir untuk mengubah transparansi latar belakang formulir

Jangan lupa klik tombol Simpan untuk menyimpan perubahan

Desainer Tingkat Lanjut

Jika Anda ahli dalam desain formulir, desainer tingkat lanjut menawarkan opsi gaya yang lebih canggih, termasuk warna latar belakang formulir

Buka Desainer Formulir seperti yang ditunjukkan pada langkah-langkah di atas
Klik tombol Perancang Tingkat Lanjut dari tab Warna

Di bawah Skema Warna, klik Bingkai dan alihkan transparansi menggunakan penggeser. Lakukan hal yang sama untuk Background

Pastikan untuk mengklik tombol Simpan di sisi kiri halaman untuk menerapkan perubahan

Kode CSS Kustom

Kami merekomendasikan metode ini jika Anda ingin mencoba semuanya, termasuk menghapus bayangan dan batas formulir

Buka Desainer Formulir
Di bawah tab Styles, gulir ke bawah ke kotak Inject Custom CSS, dan rekatkan kode CSS berikut

.supernova, .jotform-form, .form-all {
    background-color: transparent !important;
}
.form-all {
    box-shadow: none;
    border: none;
}

Seperti biasa, pastikan untuk mengeklik tombol Simpan untuk menerapkan perubahan.

Lihat juga

Cara Menyesuaikan Opasitas Latar Belakang Formulir

Jika Anda memiliki pertanyaan, saran, atau umpan balik, silakan posting di kotak komentar di bawah ini. Anda juga dapat menghubungi kami dengan membuat tiket dukungan

Hello guys tutorial kali ini saya akan membuat form login dengan style transparan dengan background yang terdiri dari memasukan email dan password serta tombol Sign In. Form login merupakan tampilan awal dari sebuah aplikasi yang memungkinkan pengguna untuk mengisikan username dan password untuk mengetahui keabsahan user dalam suatu sistem.

Sekarang, buat folder proyek dan buat file index. html dan gaya. file css di dalamnya dan sertakan logo dan gambar pengguna sebagai latar belakang. Setelah selesai, buka index. html dan masukkan kode berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Transparent Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="loginBox">
        <img src="user.png" class="user">
        <h2>Login</h2>
        <form>
            <p>Email</p>
            <input type="text" name="" placeholder="Enter Email">
            <p>Password</p>
            <input type="password" name="" placeholder="******">
            <input type="submit" name="" value="Sign In">
            <a href="#">Forget Password</a>
        </form>
    </div>
</body>
</html>

_

Selanjutnya, buka gaya. css dan masukkan kode berikut

body{
    margin: 0;
    padding: 0;
    background: url(bg.jpg);
    background-size: cover;
    font-family: sans-serif;
}

.loginBox{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 350px;
    height: 420px;
    padding: 50px;
    border-radius: 10px;
    box-sizing: border-box;
    background: rgba(0,0,0,.5);
}

.user{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: calc(-100px/2);
    left: calc(50% - 50px);
}

h2{
    margin: 0;
    padding: 10px 0 20px;
    color: #efed40;
    text-align: center;
}

.loginBox p{
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #fff;
}

.loginBox input{
    width: 100%;
    margin-bottom: 20px;
}

.loginBox input[type="text"],
.loginBox input[type="password"]{
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
}

::placeholder{
    color: rgba(255,255,255,.5);
}

.loginBox input[type="submit"]{
    border: none;
    outline: none;
    height: 40px;
    color: #fff;
    font-size: 16px;
    background: #ff267e;
    cursor: pointer;
    border-radius: 20px;
}

.loginBox input[type="submit"]:hover{
    background: #efed40;
    color: #262626;
}

.loginBox a{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

Simpan semua file dan jalankan index. html

Apakah ada kode HTML untuk transparan?

#0000ffff - itu adalah kode yang Anda perlukan untuk transparan.

Bagaimana cara membuat latar belakang formulir menjadi transparan?

Contoh dijelaskan. Pertama, kita membuat elemen Kemudian kita membuat

Bagaimana cara membuat PNG transparan dalam HTML?

Transparansi tidak dilakukan dalam HTML, tetapi merupakan bagian dari gambar itu sendiri. Browser akan melihat gambar sebagai PNG dan menampilkannya sebagai PNG secara otomatis. Untuk menambahkan transparansi pada gambar, Anda harus mengedit file dengan editor grafis seperti Photoshop . Simpan jawaban ini.