masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > CSS只改变背景透明度，不改变子元素透明度_html/css_WEB-ITnose

CSS只改变背景透明度，不改变子元素透明度_html/css_WEB-ITnose

WBOY
Lepaskan： 2016-06-24 11:56:07
asal
1379 orang telah melayarinya

一般情况下，我们可以使用css的opcity属性改变某个元素的透明度，但是其元素下的子元素的透明度也会被改变，即使对子元素重新定义也没有用，例如：

 

Html代码  

  1.   
  2.  
      
  3.   显示文字  
  4.  
  
    •   

     

    文字元素的透明度也会是0.4。

     

    于是想一想，如果有方法只改变背景的透明度就能解决此问题了。

     

    方法1：使用一张透明的图片做背景可以达成效果，但是有没有更简单的方法呢？

     

    方法2：使用RGBA。

     

    例如：

     

    Html代码  

    1.   
    2.    
        
    3.       显示文字  
    4.    
      
    •   

    Label berkaitan：
    CSS只改变背景透明度，不改变子元素透明度
    sumber：php.cn
    Artikel sebelumnya：css3骰子（transform初识）_html/css_WEB-ITnose Artikel seterusnya：Codeforces Round #273 (Div. 2)_html/css_WEB-ITnose
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Isu terkini
    function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
    daripada 2024-04-29 11:01:01
    0
    3
    2439
    Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
    daripada 2024-04-23 00:22:19
    0
    11
    2572
    Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
    daripada 2024-04-19 15:37:47
    0
    1
    2175
    Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
    daripada 2024-04-18 23:52:34
    0
    1
    2051
    Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
    daripada 2024-04-16 10:10:18
    0
    0
    2153
    Topik-topik yang berkaitan
    Lagi>
    Cadangan popular
    Tutorial Popular
    Lagi>
    Tutorial berkaitan
    Cadangan popular
    Kursus terkini
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan