如何在圖片中隱藏信息？Python3實現圖片隱寫術

寫術到底是什么，這里給大家講個故事吧：

2012年大眾點評和食神網的競爭非常激烈，后者開始大規模地爬取前者的數據，主要是圖片。大眾點評沒有走中國的司法流程，而是直接向APP STORE提交了證據，使食神的APP下架2次。這些證據就是食神爬取的圖片，圖片中用隱寫術嵌入了大眾點評的版權信息！

這是如何實現的呢？

下面有一張lenna的圖片:

提取該圖片的綠色分量：

取綠色分量的最低位，如果是1就設置圖片為綠,是0設為黑。

你將看到隱藏的信息:"Steganography"。大眾點評正是利用了這些信息向蘋果公司證明了圖片的來源，最終保護了公司的利益。

6不6？想不想學？下面的課程就將教你如何用Python實現隱寫術。

一、實驗簡介

wikipedia 關于隱寫術的介紹：

隱寫術是一門關于信息隱藏的技巧與科學，所謂信息隱藏指的是不讓除預期的接收者之外的任何人知曉信息的傳遞事件或者信息的內容。隱寫術的英文叫做Steganography，來源于特里特米烏斯的一本講述密碼學與隱寫術的著作Steganographia，該書書名源于希臘語，意為“隱秘書寫”。

1.1. 知識點

Pillow 模塊
最低有效位
lambda 表達式遞歸
UTF-8 編碼

1.2. 效果展示

可以看到“施法”前后的圖片肉眼看不出區別，然而圖片卻真實的隱藏了一些數據在里面。

二、實驗步驟

2.1. 實驗原理

還是引用 wikipedia 的解釋：

載體文件（cover file）相對隱秘文件的大小（指數據含量，以比特計）越大，隱藏后者就越加容易。
因為這個原因，數字圖像（包含有大量的數據）在因特網和其他傳媒上被廣泛用于隱藏消息。這種方法使用的廣泛程度無從查考。例如：一個24位的位圖中的每個像素的三個顏色分量（紅，綠和藍）各使用8個比特來表示。如果我們只考慮藍色的話，就是說有2^8種不同的數值來表示深淺不同的藍色。而像11111111和11111110這兩個值所表示的藍色，人眼幾乎無法區分。因此，這個最低有效位就可以用來存儲顏色之外的信息，而且在某種程度上幾乎是檢測不到的。如果對紅色和綠色進行同樣的操作，就可以在差不多三個像素中存儲一個字節的信息。
更正式一點地說，使隱寫的信息難以探測的，也就是保證“有效載荷”（需要被隱蔽的信號）對“載體”（即原始的信號）的調制對載體的影響看起來（理想狀況下甚至在統計上）可以忽略。這就是說，這種改變應該無法與載體中的噪聲加以區別。
（從信息論的觀點來看，這就是說信道的容量必須大于傳輸“表面上”的信號的需求。這就叫做信道的冗余。對于一幅數字圖像，這種冗余可能是成像單元的噪聲；對于數字音頻，可能是錄音或者放大設備所產生的噪聲。任何有著模擬放大級的系統都會有所謂的熱噪聲（或稱“1/f”噪聲)，這可以用作掩飾。另外，有損壓縮技術（如JPEG）會在解壓后的數據中引入一些誤差，利用這些誤差作隱寫術用途也是可能的。）
隱寫術也可以用作數字水印，這里一條消息（往往只是一個標識符）被隱藏到一幅圖像中，使得其來源能夠被跟蹤或校驗。

總而言之，本實驗便是利用圖片四個顏色分量（rgba）的最低有效位（英語：Least Significant Bit，lsb）來隱藏信息（本實驗隱藏的是文字）

2.2. 安裝包

本實驗用到了 pillow 這個模塊，在安裝它前更新源

$ sudo apt-get update

首先我們需要處理一個問題：當前實驗樓的環境中 python3 命令使用的 python 版本為 3.5，但源中卻沒有 python3.5-dev，這會導致安裝 Pillow 出錯。所以我們必須將 python3 命令使用的 python 版本切換為 3.4，然后再安裝 python3-dev 和 python3-setuptools。

$ sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.4 70 --slave /usr/bin/
python3m python3m /usr/bin/python3.4m 
$ sudo apt-get install python3-dev python3-setuptools

然后安裝 Pillow 依賴包

$ sudo apt-get install libtiff5-dev libjpeg8-dev zlib1g-dev \
 libfreetype6-dev liblcms2-dev libwebp-dev tcl8.6-dev tk8.6-dev python-tk

最后安裝 Pillow：

$ sudo pip3 install Pillow

2.3. 程序實現

先導入 Pillow 模塊：

from PIL import Image

2.3.1. 編碼

我們首先設計將隱藏信息編碼到圖片中的函數 encodeDataInImage()，其有兩個參數，分別是用作載體的圖片對象和需要被隱藏的字符串。也就是說我們可以這樣調用它：

encodeDataInImage(Image.open("steganographia.png"), '你好世界，Hello world!')

encodeDataInImage() 函數如下：

def encodeDataInImage(image, data):
 evenImage=makeImageEven(image) # 獲得最低有效位為 0 的圖片副本
 binary=''.join(map(constLenBin,bytearray(data, 'utf-8'))) # 將需要被隱藏的字符串轉換成二進制字符串
 if len(binary) > len(image.getdata()) * 4: # 如果不可能編碼全部數據， 拋出異常 
 raise Exception("Error: Can't encode more than " + len(evenImage.getdata()) * 4 + " bits in this image. ") 
 encodedPixels=[(r+int(binary[index*4+0]),g+int(binary[index*4+1]),b+int(binary[index*4+2]),t+int(binary[index*4+3])) if index*4 < len(binary) else (r,g,b,t) for index,(r,g,b,t) in enumerate(list(evenImage.getdata()))] # 將 binary 中的二進制字符串信息編碼進像素里 
 encodedImage=Image.new(evenImage.mode, evenImage.size) # 創建新圖片以存放編碼后的像素 
 encodedImage.putdata(encodedPixels) # 添加編碼后的數據 
 return encodedImage

makeImageEven() 函數的實現如下：

def makeImageEven(image): pixels=list(image.getdata()) # 得到一個這樣的列表： [(r,g,b,t),(r,g,b,t)...] evenPixels=[(r>>1<<1,g>>1<<1,b>>1<<1,t>>1<<1) for [r,g,b,t] in pixels] # 更改所有值為偶數（魔法般的移位） evenImage=Image.new(image.mode, image.size) # 創建一個相同大小的圖片副本 evenImage.putdata(evenPixels) # 把上面的像素放入到圖片副本 return evenImage

相關函數的文檔鏈接：

Image.getdata()
PIL.Image.new()
PIL.Image.Image.putdata()

encodeDataInImage() 中，bytearray() 將字符串轉換為整數值序列（數字范圍是 0 到 2^8-1），數值序列由字符串的字節數據轉換而來，如下圖：

utf-8 編碼的中文字符一個就占了3個字節，那么四個字符共占 3×4=12 個字節，于是共有12個數字。（可以在右下角切換到中文輸入法，這樣就能輸入中文了）

然后 map(constLenBin,bytearray(data, 'utf-8')) 對數值序列中的每一個值應用 constLenBin() 函數，將十進制數值序列轉換為二進制字符串序列。

def constLenBin(int):
 binary="0"*(8-(len(bin(int))-2))+bin(int).replace('0b','') # 去掉 bin() 返回的二進制字符串中的 '0b'，并在左邊補足 '0' 直到字符串長度為 8 
 return binary

在這里 bin() 的作用是將一個 int 值轉換為二進制字符串，詳見： https://docs.python.org/3/library/functions.html#bin

2.3.2. 解碼

decodeImage() 返回圖片解碼后的隱藏文字，其接受一個圖片對象參數。

def decodeImage(image): 
 pixels=list(image.getdata()) # 獲得像素列表 
 binary=''.join([str(int(r>>1<<1!=r))+str(int(g>>1<<1!=g))+str(int(b>>1<<1!=b))+str(int(t>>1<<1!=t)) for (r,g,b,t) in pixels]) # 提取圖片中所有最低有效位中的數據 
 # 找到數據截止處的索引 
 locationDoubleNull=binary.find('0000000000000000') 
 endIndex=locationDoubleNull+(8-(locationDoubleNull % 8)) if locationDoubleNull%8 !=0 else locationDoubleNull 
 data=binaryToString(binary[0:endIndex]) 
 return data

str.find()

找到數據截止處所用的字符串 '0000000000000000' 很有意思，他的長度為16，而不是直覺上的 8，因為兩個包含數據的字節的接觸部分可能有 8 個 0。

binaryToString() 函數將提取出來的二進制字符串轉換為隱藏的文本：

def binaryToString(binary): 
 index=0 
 string=[] 
 rec=lambda x, i: x[2:8] + (rec(x[8:], i-1) if i > 1 else '') if x else '' # rec=lambda x, i: x and (x[2:8] + (i > 1 and rec(x[8:], i-1) or '')) or '' 
 fun=lambda x, i: x[i+1:8] + rec(x[8:], i-1) 
 while index + 1 < len(binary): 
 chartype=binary[index:].index('0') 
 length=chartype*8 if chartype else 8 
 string.append(chr(int(fun(binary[index:index+length],chartype),2))) 
 index +=length 
 return ''.join(string)

要看明白這個，必須要先搞懂 UTF-8 編碼的方式，可以在 wikipedia 上了解 UTF-8 編碼：https://zh.wikipedia.org/wiki/UTF-8

UTF-8 是 UNICODE的一種變長度的編碼表達方式，也就是說一個字符串中，不同的字符所占的字節數不一定相同，這就給我們的工作帶來了一點復雜度，如果我們要支持中文的話（那不是廢話么）。

7	U+0000	U+007F	1	0xxxxxxx
11	U+0080	U+07FF	2	110xxxxx	10xxxxxx
16	U+0800	U+FFFF	3	1110xxxx	10xxxxxx	10xxxxxx
21	U+10000	U+1FFFFF	4	11110xxx	10xxxxxx	10xxxxxx	10xxxxxx
26	U+200000	U+3FFFFFF	5	111110xx	10xxxxxx	10xxxxxx	10xxxxxx	10xxxxxx
31	U+4000000	U+7FFFFFFF	6	1111110x	10xxxxxx	10xxxxxx	10xxxxxx	10xxxxxx	10xxxxxx

在上圖中，只有 x 所在的位置（也即是字節中第一個 0 之后的數據）存儲的是真正的字符數據，因此我們使用下面兩個匿名函數來提取出這些數據：

rec=lambda x, i: x[2:8] + (rec(x[8:], i-1) if i > 1 else '') if x else '' 
fun=lambda x, i: x[i+1:8] + rec(x[8:], i-1)

fun() 接受 2 個參數，第一個參數為表示一個字符的二進制字符串，這個二進制字符串可能有不同的長度（8、16、24...48）；第二個參數為這個字符占多少個字節。

lambda x, i: x[i+1:8] + rec(x[8:], i-1) 中 x[i+1:8] 獲得第一個字節的數據，然后調用 rec()，以遞歸的方提取后面字節中的數據。

這里要提一句，rec=lambda x, i: x[2:8] + (rec(x[8:], i-1) if i > 1 else '') if x else ''，你可能對在表達式里面引用了 rec 感到不可理解，的確，嚴格意義上這樣是不能實現遞歸的，但在 python 里這樣是可以的，這就是 python 的語法糖了。

使用 lambda 表達式寫遞歸從來不是一件簡單的事，因為匿名函數引用自身并不簡單，大家可以參考一下大牛劉未鵬的博文：http://blog.csdn.net/pongba/article/details/1336028

我們注意到，字符的字節數據中，第一個字節開頭 1 的數目便是字符所占的字節數：

chartype=binary[index:].index('0') # 存放字符所占字節數，一個字節的字符會存為 0

string.append(chr(int(fun(binary[index:index+length],chartype),2))) 這一行中用到的函數 int() 以及 chr的作用如下：

int(): 接受兩個參數，第一個參數為數字字符串，第二個參數為這個數字字符串代表的數字的進制。詳見： https://docs.python.org/3/library/functions.html#int

chr()：接受一個參數，參數為 int 值，返回 Unicode 碼點為這個 int 值的字符。見下圖：

while 循環的最后我們將當前字符的索引增加當前字符的長度，得到下一個字符的索引。

這樣，我們可以識別出二進制字符串中哪些部分代表哪些字符了，然后就能調用 fun() 取得各個字符的數據了。

2.4. 測試效果

輸入下面的命令獲得測試用圖片：

$ wget http://labfile.oss.aliyuncs.com/courses/651/coffee.png

在我們的代碼后添加這兩行：

encodeDataInImage(Image.open("coffee.png"), '你好世界，Hello world!').save('encodeImage.png') print(decodeImage(Image.open("encodeImage.png")))

假設你的源代碼文件為 steganography.py：

$ python3 steganography

它應該打印出 "你好世界，Hello world!"。

三、實驗總結

本實驗了解了圖片隱寫術的原理，這是一個很經典的技術了，完成本試驗后應該明白了 lsb 到底是什么東西，有什么用。并且，本實驗也用了不少的“魔法”（移位，lambda 遞歸，列表推導式...），這些”魔法“大家也應該掌握。

四、完整代碼

使用下面的命令可以下載源代碼：

$ wget http://labfile.oss.aliyuncs.com/courses/651/steganography.py

本項目的完整代碼及demo，可在實驗樓查看并在線完成：

https://www.shiyanlou.com/courses/589

更多Python經典項目：Python全部 - 課程：

https://www.shiyanlou.com/courses/?course_type=all&tag=Python

言

在CSS中很多隱藏元素的方法，但這些方法的可訪問性、布局、動畫、性能和事件處理的方式有所不同。

「動畫：」 一些CSS隱藏元素的方法一般是全有或者全無，元素要么是完全可見，要么是完全不可見，并且沒有中間狀態。其他的，比如透明度，可以是一個范圍的值，所以在這中間過程插入動畫成為可能；
「可訪問性：」 下面的每一種方法都會在視覺上隱藏一個元素，但不一樣會真正的去除DOM元素。有一些方式隱藏元素后，屏幕閱讀器仍然能讀取到元素內容；
「事件處理：」 隱藏元素之后，有些方式元素上的事件仍然能被觸發，而有些方式就會導致元素上的事件觸發無效；
「表現：」 瀏覽器加載并解析 HTML DOM 和 CSS 對象模型后，頁面將分三個階段呈現：布局（生成每個元素的幾何位置）、繪制（繪制每個元素的像素）、組合（以適當的順序放置元素層）。僅導致構圖變化的效果明顯比影響布局的效果更好。在某些情況下，瀏覽器還可以使用硬件加速。

實現方式

通過css實現隱藏元素方法有如下：

1.display: none: 渲染樹不會渲染對象

2.visibility: hidden: 元素在頁面中仍占據空間，但是不會響應綁定的監聽事件。

3.opacity: 0: 元素在頁面中仍然占據空間，并且能夠響應元素綁定的監聽事件。

4.position: absolute: 通過使用絕對定位將元素移除可視區域內，以此來實現元素的隱藏。

5.z-index: 負值:來使其他元素遮蓋住該元素，以此來實現隱藏。

6.clip/clip-path: 元素仍在頁面中占據位置，但是不會響應綁定的監聽事件。

7.transform: scale(0,0): 將元素縮放為 0，元素仍在頁面中占據位置，但是不會響應綁定的監聽事件。

8、color alpha 透明度

9、可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸

10、覆蓋另一個元素

11、transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。

1. visibility: hidden;   這個屬性只是簡單的隱藏某個元素, 但是元素占用的空間任然存在 

2. opacity: 0;   一個CSS3屬性, 設置 0 可以使一個元素完全透明, 制作出和 visibility 一樣的效果 。 與 visibility 相比, 它可以被 transition 和 animate 。

3. position: absolute;    使元素脫離文檔流, 處于普通文檔之上, 給它設置一個很大的 left 負值定位, 使元素定位在可見區域之外 。

4. display: none;  元素會變得不可見, 并且不會再占用文檔的空間 。

5. transform: scale(0);   將一個元素設置為無限小, 這個元素將不可見 。 這個元素原來所在的位置將被保留 。

6. HTML5 hidden attribute; hidden 屬性的效果和 display:none; 相同, 這個屬性用于記錄一個元素的狀態 。

7. height: 0; overflow: hidden; 將元素在垂直方向上收縮為0, 使元素消失 。 只要元素沒有可見的邊框, 該技術就可以正常工作 。

8. filter: blur(0); 將一個元素的模糊度設置為0, 從而使這個元素“消失”在頁面中 。

display:none

設置元素的display為none是最常用的隱藏元素的方法

.hide {
    display:none;
}

將元素設置為display:none后，元素在頁面上將徹底消失

元素本身占有的空間就會被其他元素占有，也就是說它會導致瀏覽器的重排和重繪

消失后，自身綁定的事件不會觸發，也不會有過渡效果

特點：元素不可見，不占據空間，無法響應點擊事件

color alpha 透明度

可以將元素的color、background-color 和 border-color 等屬性設置為rgba(0,0,0,0)，這樣就會使元素完全透明：

div {
 color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}

這三個屬性都是支持設置動畫效果的，需要注意，透明度不能應用于帶有背景圖片的元素，除非它們是使用 linear-gradient 或類似方法生成的。

Alpha 通道可以設置為：

transparent：完全透明（中間不能插入動畫）；
rgba(r, g, b, a)：紅色、綠色、藍色和 alpha；
hsla(h, s, l, a)：色相、飽和度、亮度和 alpha；
#RRGGBBAA 或 #RGBA。

transform

transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏：

div {
 transform: scale(0);
}

div {
 translate(-9999px, 0px)
}

transform 屬性提供了出色的性能和硬件加速，因為元素被有效地移動到了單獨的層中，并且可以在 2D 或 3D 中進行動畫處理。原始的布局空間會保持原樣，并不會受影響。使用這種方式隱藏的元素不會觸發任何事件。

z-index

可以通過將元素的 z-index 屬性設置為負值，以實現元素的隱藏。這實際上就是將元素放在了我們看不到的層。

div {
  z-index: -1;
}

position

position屬性允許使用top、bottom、left、right 從頁面中的默認位置移動元素。因此，絕對定位的元素可以通過左鍵：-9999px 等值移出屏幕：

div {
  position: absolute;
  left: -999px;
}

覆蓋另一個元素

通過在元素的上面放置與背景顏色相同的元素，可以在視覺上隱藏一個元素。下面來使用::after偽元素來實現：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}

雖然這從技術上講是可以實現的，但是這樣做需要更多的代碼。

縮小尺寸

可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實現元素的隱藏。可能還需要應用 overflow: hidden; 來確保內容不會溢出。

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}

使用這種形式我們可以在隱藏過程中使用動畫效果，并且他的性能會比 transform 好很多。

visibility:hidden

設置元素的visibility為hidden也是一種常用的隱藏元素的方法

從頁面上僅僅是隱藏該元素，DOM結果均會存在，只是當時在一個不可見的狀態，不會觸發重排，但是會觸發重繪

.hidden{
    visibility:hidden
}

給人的效果是隱藏了，所以他自身的事件不會觸發

特點：元素不可見，占據頁面空間，無法響應點擊事件

opacity:0

opacity屬性表示元素的透明度，將元素的透明度設置為0后，在我們用戶眼中，元素也是隱藏的

opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數字，或者 0% 和 100% 之間的百分比，對應地表示完全透明和完全不透明。

opacity: N：該屬性用來設置元素的透明度；
filter: opacity(N) ：filter屬性用來設置元素的濾鏡，opacity是濾鏡重的透明度，用來設置元素的透明度。

不會引發重排，一般情況下也會引發重繪

如果利用 animation 動畫，對 opacity 做變化（animation會默認觸發GPU加速），則只會觸發 GPU 層面的 composite，不會觸發重繪

.transparent {
    opacity:0;
}

由于其仍然是存在于頁面上的，所以他自身的的事件仍然是可以觸發的，但被他遮擋的元素是不能觸發其事件的

需要注意的是：其子元素不能設置opacity來達到顯示的效果

特點：改變元素透明度，元素不可見，占據頁面空間，可以響應點擊事件

在現代瀏覽器中，這兩者之間幾乎沒有實際的區別，但如果同時應用多種效果（模糊、對比度、灰度等）時，應該使用 filter 屬性。

注意：opacity 可以設置動畫并提供出色的性能，但頁面上保留完全透明的元素可能會觸發事件。

設置height、width屬性為0

將元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0，如果元素內有子元素或內容，還應該設置其overflow:hidden來隱藏其子元素

.hiddenBox {
    margin:0;     
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

特點：元素不可見，不占據頁面空間，無法響應點擊事件

position:absolute

將元素移出可視區域

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

特點：元素不可見，不影響頁面布局

clip-path

通過裁剪的形式

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

特點：元素不可見，占據頁面空間，無法響應點擊事件

小結

最常用的還是display:none和visibility:hidden，其他的方式只能認為是奇招，它們的真正用途并不是用于隱藏元素，所以并不推薦使用它們

區別

關于display: none、visibility: hidden、opacity: 0的區別，如下表所示：

	display: none	visibility: hidden	opacity: 0
頁面中	不存在	存在	存在
重排	會	不會	不會
重繪	會	會	不一定
自身綁定事件	不觸發	不觸發	可觸發
transition	不支持	支持	支持
子元素可復原	不能	能	不能
被遮擋的元素可觸發事件	能	能	不能

代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 幾種隱藏元素的方法(瑣碎知識點整理) </title>
</head>

<style>
.w_vis-hid-outer {
  background-color: steelblue;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 42px;
}
.w_vis-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-con {
  background-color: tomato;
}
.w_r-con {
  background-color: yellowgreen;
}
/* visibility: hidden 設置隱藏 */
.w_now-vis {
  background-color: brown;
  margin: 0 12px;
  /* visibility: hidden; */
}



.w_opac-hid-outer {
  background-color: slategray;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_opac-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-opa-con {
  background-color: snow;
}
.w_r-opa-con {
  background-color: tan;
}
/* opacity: 0  設置隱藏 */
.w_now-opac {
  background-color: skyblue;
  margin: 0 12px;
  /* opacity: 0; */
}



.w_posi-hid-outer {
  background-color: slategray;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_posi-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-pos-con {
  background-color: snow;
  margin-right: 12px;
}
.w_r-pos-con {
  background-color: tan;
  margin-left: 12px;
}
/* opacity: 0  設置隱藏 */
.w_now-posi {
  background-color: skyblue;
  /* position: absolute; */
  /* left: -6666px; */
}



.w_disp-hid-outer {
  background-color: red;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_disp-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-dis-con {
  background-color: #ccc;
  margin-right: 12px;
}
.w_r-dis-con {
  background-color: #212121;
  margin-left: 12px;
  color: #FFF;
}
/* display: none  設置隱藏 */
.w_now-disp {
  background-color: blueviolet;
  /* display: none; */
}


.w_trans-hid-outer {
  background-color: darkorange;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_trans-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-tran-con {
  background-color: #ccc;
  margin-right: 12px;
}
.w_r-tran-con {
  background-color: #212121;
  margin-left: 12px;
  color: #FFF;
}
/* transform: scale(0)  設置隱藏 */
.w_now-trans {
  background-color: blueviolet;
  /* transform: scale(0); */
}


.w_hidd-hid-outer {
  background-color: darksalmon;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_hidd-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-hid-con {
  background-color: steelblue;
  margin-right: 12px;
}
.w_r-hid-con {
  background-color: #212121;
  margin-left: 12px;
  color: #FFF;
}
/* hidden attribute  設置隱藏 (在 html 元素標簽上設置) */
.w_now-hidd {
  background-color: red;
}

</style>
<body>
  <div class="w_hide-shel">
    <!-- visibility: hidden  方法 -->
    <div class="w_vis-hid-outer">
      <p class="w_l-con">左側元素 -- 方法 1: visibility: hidden</p>
      <p class="w_now-vis">中間  隱藏  元素</p>
      <p class="w_r-con">右側元素  -- 方法 1: visibility: hidden</p>
    </div>

    <!-- opacity: 0  方法-->
    <div class="w_opac-hid-outer">
      <p class="w_l-opa-con">左側元素 -- 方法 2: opacity: 0</p>
      <p class="w_now-opac">中間  隱藏  元素</p>
      <p class="w_r-opa-con">右側元素  -- 方法 2: opacity: 0</p>
    </div>

    <!-- position: absolute 方法 -->
    <div class="w_posi-hid-outer">
      <p class="w_l-pos-con">左側元素 -- 方法 3: position: absolute</p>
      <p class="w_now-posi">中間  隱藏  元素</p>
      <p class="w_r-pos-con">右側元素  -- 方法 3: position: absolute</p>
    </div>

    <!-- display: none -->
    <div class="w_disp-hid-outer">
      <p class="w_l-dis-con">左側元素 -- 方法 4: display: none</p>
      <p class="w_now-disp">中間  隱藏  元素</p>
      <p class="w_r-dis-con">右側元素  -- 方法 4: display: none</p>
    </div>

    <!-- transform: scale(0) -->
    <div class="w_trans-hid-outer">
      <p class="w_l-tran-con">左側元素 -- 方法 5: display: none</p>
      <p class="w_now-trans">中間  隱藏  元素</p>
      <p class="w_r-tran-con">右側元素  -- 方法 5: display: none</p>
    </div>

    <!-- hidden attribute -->
    <div class="w_hidd-hid-outer">
      <p class="w_l-hid-con">左側元素 -- 方法 6: hidden attribute</p>
      <p class="w_now-hidd">中間  隱藏  元素</p>
      <!-- <p class="w_now-hidd" hidden="true">中間  隱藏  元素</p> -->
      <p class="w_r-hid-con">右側元素  -- 方法 6: hidden attribute</p>
    </div>
  </div>
</body>
</html>

給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。

前端學習交流、自學、學習資料等推薦 - 知乎

言

一說起隱藏HTML頁面上的元素，很多人第一反應就是設置元素的css屬性display:none;值，這是一種最常見的隱藏頁面元素方法。本篇文章我們就一起看看使用CSS隱藏頁面元素的方法，以及它們的區別。

本篇文章中的例子直接放到github地址中，感興趣的同學可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html

CSS

方法1-display:none

正如上文說的一樣，最簡單也最粗暴的方法就是設置元素的display屬性為none;

display:none;

設置為display:none;的元素將不會再占用頁面空間，其占用的空間會被其他元素所占有，從而會引起瀏覽器的重排和重匯。

方法2-visibility: hidden

另外一種方法是設置元素的visibility屬性為hidden。

visibility: hidden

這種做法雖然能夠隱藏元素，但是該元素仍會占用頁面空間，因此只會導致瀏覽器的重匯而不會引起重排。

如果希望元素隱藏后不會引起頁面布局的變化，則推薦使用visibility:hidden;方式。

方法3-opacity:0

設置元素透明度opacity屬性為0，也可以隱藏頁面元素。

opacity:0

在呈現上與visibility:hidden;方式一樣，同樣會占據頁面空間。

差異性-頁面布局

對頁面布局的影響主要是看是否會引起瀏覽器的重匯和重排，對應的差異如下圖所示。

頁面布局差異

差異性-事件綁定

display:none;的元素會直接從頁面上消失，因此在該元素上綁定的事件不會生效。
visibility: hidden;的元素不會觸發綁定的事件。
opacity:0; 的元素會觸發綁定的事件，例如點擊會觸發click函數。

我們可以通過以下的例子來看看。

首先我們定義兩個div，分別設置為visibility: hidden;和opacity:0，在兩個div上分別綁定一個click事件。

定義div元素

綁定的事件

當我們在兩個元素都進行點擊時，可以在控制臺看到如下輸出結果。

結果

從上述結果可以看出和上述結論一致。

差異性-動畫屬性

display:none;的元素會直接從頁面消失，因此定義transition效果完全無效。
visibility:hidden;的元素會在transition設置的時間內消失，但是沒有動畫效果。
opacity:0;的元素可以和正常元素一樣，從頁面以動畫效果消失。

同樣我們可以通過以下這個例子來看看。

首先，我們定義兩個div，并設置其transition屬性。

div元素

定義transition效果

我們通過將鼠標移至元素上，可以看到兩者的差異，從而驗證了上述結論的正確性。

結束語

本篇文章主要講解了使用CSS隱藏元素的幾種常用方法，并講解了它們之間的區別，以便大家在特定的場景中進行選擇。

在線咨詢

上一篇：電腦小科普：一招解決網頁文字無法復制，別再傻傻手打錄
下一篇：上技校沒面子？職業教育也需打通學歷文憑進階體系

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何在圖片中隱藏信息？Python3實現圖片隱寫術

寫術到底是什么，這里給大家講個故事吧：

一、實驗簡介

二、實驗步驟

三、實驗總結

四、完整代碼

言

實現方式

display:none

color alpha 透明度

transform

z-index

position

覆蓋另一個元素

縮小尺寸

visibility:hidden

opacity:0

設置height、width屬性為0

position:absolute

clip-path

小結

區別

代碼實現

言

方法1-display:none

方法2-visibility: hidden

方法3-opacity:0

差異性-頁面布局

差異性-事件綁定

差異性-動畫屬性

結束語

您的項目需求