是否有一個相當於CSS背景圖像的前景？

我想爲網頁上的元素添加一些光芒。我寧願如果我不必添加額外的HTML到頁面。我希望圖像出現在元素的前面而不是後面。什麼是最好的方法來做到這一點？是否有一個相當於CSS背景圖像的前景？

2012-09-30 Himmators

是元素的尺寸固定的嗎？ –

是的，他們是。更多字符讓我評論。 – Himmators

我試圖使它現在與psuedo-element一起工作... – Himmators

，實現了「前景圖像」，無需額外的HTML代碼，你可以使用一個僞元素（::before/:before）加上CSS pointer-events。需要最後一個屬性，以便用戶可以實際點擊圖層，「就好像它不存在」一樣。

下面是一個例子（使用彩色其alpha通道爲50％，這樣就可以看出，實際的元件實際上可以被聚焦）：http://jsfiddle.net/JxNdT/

<div id="cont"> 
Test<br> 
<input type="text" placeholder="edit"> 
</div>

#cont { 
    width: 200px; 
    height: 200px; 
    border: 1px solid #aaa; /*To show the boundaries of the element*/ 
} 
#cont:before { 
    position: absolute; 
    content: ''; 
    background: rgba(0,0,0, 0.5); /*partially transparent image*/ 
    width: 200px; 
    height: 200px; 
    pointer-events: none; 
}

PS。我選擇了::before僞元素，因爲這自然會導致正確的定位。如果我選擇::after，那麼我必須將position:relative;添加到僞元素（::after）的實元素（#cont）和top:0;left:0;。

PPS。爲了獲得對沒有固定大小的元素的前景效應，需要額外的元素。該包裝元素需要position:relative;display:inline-block;樣式。將僞元素的width和height設置爲100%，僞元素將拉伸到包裝元素的寬度和高度。演示：http://jsfiddle.net/JxNdT/1/。

來源

2012-09-30 09:15:21

好東西！由於圖像已經有alpha透明度，我不需要背景元素，但除了我會複製粘貼！ – Himmators

只是好奇，是否有一個similair解決方案，如果元素大小不是靜態的？ – Himmators

@KristofferNolgren你需要一個包含'position：relative;'（和'display：inline-block;'）的包裝器，然後在僞元素上使用'100％'作爲'width'和'height'。僞元素將拉伸到包裝元素的寬度和高度。演示：http://jsfiddle.net/JxNdT/1/ –

你可以使用這個CSS

#yourImage 
{ 
z-index: 1; 
}

注意

設置z-index索引更大了，你是把圖像元素的的z-index。

如果您還沒有指定任何z-index那麼1會做這項工作。

您也可以將z-index設置爲-1，在這種情況下，圖片始終位於background！

來源

2012-09-30 08:53:17 Anirudha

「z-index」屬性僅適用於定位（絕對，相對或固定）元素。 – gearsdigital

如果你需要一個白色透明的前景

這對像我這樣的未來的訪客誰正在考慮增加一個白色透明前景的元素來傳達它隱藏/例如禁用。你通常可以通過簡單地降低低於1的opacity實現你的目標：

.is-hidden { 
 
    opacity: 0.5; 
 
}

visible 
 
<span class="is-hidden">hidden</span> 
 
visible

來源

2016-09-27 12:51:16

是否有一個相當於CSS背景圖像的前景？

回答

相關問題