Bagaimana untuk Mencipta Tindanan dengan Latar Belakang Lutsinar dalam HTML/CSS?

Mencipta Tindanan dengan Latar Belakang Lutsinar dalam HTML/CSS

Anda bertujuan untuk mencipta kesan tindanan di mana kotak timbul muncul di atas latar belakang kandungan, meredupkan penampilannya. Walau bagaimanapun, penggunaan kelegapan pada bekas juga mempengaruhi kotak timbul.

Penyelesaian

Untuk mencapai kesan yang anda inginkan, gunakan kelegapan bersama-sama dengan warna latar belakang. Dalam CSS untuk bekas:

<code class="css">#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}</code>

• warna latar belakang menetapkan warna lutsinar untuk bekas.
• rgba() mengambil format rgba(r, g, b, a), dengan r, g, b ialah nilai merah, hijau dan biru, dan a ialah kelegapan (0 adalah lutsinar sepenuhnya).

Sekarang, untuk kotak pop timbul:

<code class="css">#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}</code>

Pendekatan ini membolehkan anda meredupkan latar belakang sambil mengekalkan keterlihatan kotak pop timbul, mencipta kesan tindanan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tindanan dengan Latar Belakang Lutsinar dalam HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!