Rumah hujung hadapan web tutorial css css中的background:transparent的含义与作用

css中的background:transparent的含义与作用

Jul 21, 2017 am 09:15 AM
background

transparent是透明的意思,实际上background默认的颜色就是透明的属性
一般使用场景:
如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的background设置为transparent

有时我在看css时,看到有的css属性定义为background:transparent。意思就是背景透明。实际上background默认的颜色就是透明的属性。所以写和不写都是一样的 有段时间没写文章了,一直在学校,虽然带着电脑,但是不能上网啊!最近在用javascript写一个网页版的操作系统,写好了一定发上来,写的过程中遇到很多问题,许多都是细节方面的,很麻烦,不过自己一直在努力解决,也是对自己的一种提高吧.下面我来说一下我最近遇到的一个问题. 大家知道,你用createelement新建一个div,默认情况下这个div的style中的backgroungcolor属性是transparent,呵呵,如果我做一个div的蒙板,那么请看下面一段代码:复制代码代码如下:

div.style.position="absolute"; 
div.style.width=document.body.clientWidth+"px"; 
div.style.height=document.body.clientHeight+"px"; 
div.style.left="0px"; 
div.style.top="0px"; 
div.style.zIndex="2000"; 
div.style.backgroundColor="black"; 
div.style.filter="alpha(opacity="+0+");";
Salin selepas log masuk

这是很多蒙板div的设置,也就是说屏蔽用户对网页上的其他元素进行操作. 我们主要看后面两行代码,前面不是已经说了嘛,div的默认backgroundcolor属性就是transparent,也就是是透明,那么我们干嘛还要多此一举去设置个black(这个无所谓,随便设置个颜色,只要不是transparent就行,也不能是空字符串,浏览器会默认将空字符串看成transparent),并且设置滤镜让他透明呢. 我自己动手做了试验,一开始还对试验结果很迷惑,但自己静下来想想便发现了其中的区别,如果我们没有上面代码的后两句,那么我们便可以对蒙板后的元素进行操作,也就是说起不到屏蔽的作用,但是这个操作是有限制的,具体说就是我们只可以对有焦点的元素进行操作,比如文本,图片,按钮等,我举个例子:复制代码代码如下:

<div style="border:1px red solid;width:100px;height:100px" onclick="alert(1)"123</div >
Salin selepas log masuk

正常情况下,只要你点击这个div的任何位置,都会alert的,但是当它被一个backgroundcolor为transparent的元素遮住的时候,我们只有点击123才会alert,因为文本是可以获得焦点的,同理其他元素也一样.顺便说下,这个backgroundcolor为transparent的元素的事件会对被它遮住的元素所截获.如果我们所触发的对象没有焦点,那么事件会交换给transparent的元素处理并按这个元素进行冒泡,否则有焦点的会事件便由有焦点的那个对象处理,不会交换,并且按有焦点的元素进行冒泡.(貌似不是很好理解,可以自己多做做试验就明白了) 设置样式为透明色 有时,上文写了复制代码代码如下:background:inherit; 那么下文就可能要清除一下背景,就写了复制代码代码如下:background:transparent; 透明背景,也就是去掉了被 如果一个元素覆盖在另外一个元素之上,而你想显示下面的元素,这时你就需要把上面这个元素的background设置为transparent

用createelement新建一个div,默认情况下这个div的style中的backgroungcolor属性是transparent,呵呵,如果我做一个div的蒙板,那么请看下面一段代码:
这是很多蒙板div的设置,也就是说屏蔽用户对网页上的其他元素进行操作.
我们主要看后面两行代码,前面不是已经说了嘛,div的默认backgroundcolor属性就是transparent,也就是是透明,那么我们干嘛还要多此一举去设置个black(这个无所谓,随便设置个颜色,只要不是transparent就行,也不能是空字符串,浏览器会默认将空字符串看成transparent),并且设置滤镜让他透明呢.
我自己动手做了试验,一开始还对试验结果很迷惑,但自己静下来想想便发现了其中的区别,如果我们没有上面代码的后两句,那么我们便可以对蒙板后的元素进行操作,也就是说起不到屏蔽的作用,但是这个操作是有限制的,具体说就是我们只可以对有焦点的元素进行操作,比如文本,图片,按钮等,我举个例子:
正常情况下,只要你点击这个div的任何位置,都会alert的,但是当它被一个backgroundcolor为transparent的元素遮住的时候,我们只有点击123才会alert,因为文本是可以获得焦点的,同理其他元素也一样.顺便说下,这个backgroundcolor为transparent的元素的事件会对被它遮住的元素所截获.如果我们所触发的对象没有焦点,那么事件会交换给transparent的元素处理并按这个元素进行冒泡,否则有焦点的会事件便由有焦点的那个对象处理,不会交换,并且按有焦点的元素进行冒泡.(貌似不是很好理解,可以自己多做做试验就明白了)

Atas ialah kandungan terperinci css中的background:transparent的含义与作用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

Ia &#039; s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.

Membina aplikasi Ethereum menggunakan redwood.js dan fauna Membina aplikasi Ethereum menggunakan redwood.js dan fauna Mar 28, 2025 am 09:18 AM

Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum

Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas? Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas? Apr 02, 2025 pm 06:17 PM

Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That &#039; s seperti ini.

Sedikit di CI/CD Sedikit di CI/CD Apr 02, 2025 pm 06:21 PM

Saya &#039;

Kad yang disusun dengan kedudukan melekit dan sasaran sass Kad yang disusun dengan kedudukan melekit dan sasaran sass Apr 03, 2025 am 10:30 AM

Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.

Membandingkan penyemak imbas untuk reka bentuk responsif Membandingkan penyemak imbas untuk reka bentuk responsif Apr 02, 2025 pm 06:25 PM

Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis

Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress Apr 02, 2025 am 04:27 AM

Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?

Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'? Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'? Apr 05, 2025 pm 05:51 PM

Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...

See all articles