CSS - 圖像變暗除了矩形覆蓋

我有一個<img>爲此，我想強調的一個特定區域，如下圖所示：CSS - 圖像變暗除了矩形覆蓋

我試圖找出一種方法來創建以下只使用CSS和沒有JS的效果。我原本想使用插入邊框，但我需要能夠使用百分比來表示這兩個位置（例如，突出顯示的區域的左上角是左起50％，右起80％）和框的大小看起來border-box只能取px值。如果圖像大小發生變化，我可以使用JS來繼續調整大小，但我不想這樣做。

任何想法？

來源

2017-03-22 abagshaw

我不認爲這樣的事情是可能的裸CSS定位僞元素（我試過類似的東西之前...）。但是，您可以創建一個類（JavaScript是否有類？）或類似的東西，你可以用它來創建像調整大小代碼一樣的HighlightedImage，並且不需要任何複雜的初始化。 – tagelicht

那麼，如果我要依靠JS我知道該怎麼做this..I真的很不想，因爲我不喜歡有一噸的東西運行每個窗口大小調整的時間。我希望CSS能夠處理這一切。 – abagshaw

好了，問題是，你正在嘗試做的是一些有關的圖像（突出圖像內的指定部分）的「邏輯」，這是不是有什麼CSS是intented做（如CSS是關於事物的樣子）。而且，使用高效的代碼或例如通過延遲調整大小，如果有很多電話發生，你可以儘量減少電腦的工作量。另一種解決方案是創建一個已經凸顯服務器端用PHP（does not看起來你的任務一樣，它需要動態高亮） – tagelicht

您可以img中創建一個div元素。然後用pseudo-element上div，將有大box-shadow，並且可以使用position-absolute

div { 
 
    position: relative; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
} 
 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 5%; 
 
    left: 20%; 
 
    width: 40%; 
 
    height: 50%; 
 
    box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.6); 
 
}

<div><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg"></div>

來源

2017-03-22 17:44:25

我幾乎發佈了相同的解決方案，但由於要求基於百分比的盒子寬度和高度，因此我放棄了這一解決方案。你會爲此建議做什麼？ – hungerstar

我認爲它的工作雖然百分比..不是嗎？ – abagshaw

是其相對於'div'或父母尺寸當你使用'其中顯示：直列block'成爲圖像大小 –

也許嘗試創建4盒位於圖像重疊的四面八方，就像你所需要的。使用透明度將框的顏色設置爲黑色，並根據需要調整框的大小。這些盒子將坐在原始圖像的頂部。

來源

2017-03-22 17:40:49 Tony

的圖像，並確保箱子重疊一點，這樣頁面縮放不創建的全小條子彩色圖像。 –

我也在考慮這個問題 - 它看起來有點麻煩，但它可能工作，問題是兩個箱子重疊的角度會不會太暗？我不想那樣。 – abagshaw

@abagshaw好點。 –

CSS - 圖像變暗除了矩形覆蓋

回答

相關問題