jquery img class overlay

我試圖在我的圖像盒類上添加紅色覆蓋圖，但我無法得到結果，因爲：新的overlay類替換了舊的圖像，而我只獲取紅色背景。我需要新的課程，而不是舊的課程。jquery img class overlay

這是我到目前爲止已經試過：

$(function($) { 
 
    $(document).on('click', '.wrapper', function(event) { 
 
    var target = $(event.target).closest('.wrapper'); 
 
    
 
\t target.find('.image-box').addClass("overlay"); 
 
    
 
    }); 
 
});

.image-box { 
 
    height: 300px; 
 
    width: 100%; 
 
    padding-right: 0px; 
 
    padding-left: 0px; 
 
    background-position: center; 
 
    background-color: #4D4E56; 
 
} 
 

 
.overlay{ 
 
\t background-color:rgba(86, 61, 124, 0.55); 
 
\t transition: 0.5s; 
 
\t filter:alpha(opacity=50); 
 
    -moz-opacity:0.5; 
 
    -khtml-opacity: 0.5; 
 
    opacity: 0.5; 
 
    height:150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
<div class="image-box"></div> 
 
    </div>

來源

2016-06-08 MR.Don' t know

嘗試使用background-color：rgba（86，61，124）;只有 – Samir

爲類疊加賦予寬度。 – Samir

添加一個類不會創建一個新元素，它使用相同的元素。一個元素只能有一個背景色。可以使用僞元素（：之前或之後）來創建一個具有相同尺寸和不同透明背景色的圖層 – yoavmatchulsky

您可以使用：後添加覆蓋。檢查更新的代碼。

$(function($) { 
 
    $(document).on('click', '.wrapper', function(event) { 
 
    var target = $(event.target).closest('.wrapper'); 
 
    
 
\t target.find('.image-box').addClass("overlay"); 
 
    
 
    }); 
 
});

.image-box { 
 
    height: 300px; 
 
    width: 100%; 
 
    padding-right: 0px; 
 
    padding-left: 0px; 
 
    background-position: center; 
 
    background-color: #4D4E56; 
 
    position: relative 
 
} 
 
.image-box:after { 
 
    opacity: 0; 
 
    background-color: rgba(86, 61, 124, 0.55); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    content: ""; 
 
    transition: opacity 5s; 
 
} 
 
.overlay:after { 
 
    opacity: 1; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
<div class="image-box"></div> 
 
    </div>

來源

2016-06-08 12:43:05 Tushar

這是可以的，但是疊加在包裝類之後的元素上，將max-height添加到覆蓋類，還是有更好的解決方案？ –

你知道爲什麼這個代碼轉換不工作嗎？ –

立即檢查。我改變了CSS。 – Tushar

如果我更好地瞭解您下面是代碼片段。

$(function($) { 
 
    $(document).on('click', '.wrapper', function(event) { 
 
    $(this).find('.image-box').addClass("overlay"); 
 
    }); 
 
});

.image-box { 
 
    height: 300px; 
 
    width: 100%; 
 
    padding-right: 0px; 
 
    padding-left: 0px; 
 
    background-position: center; 
 
    background-color: #4D4E56; 
 
} 
 

 
.overlay{ 
 
\t /*background-color:rgba(86, 61, 124, 0.55);*/ 
 
    background-color:rgba(255, 0, 0, 1); 
 
\t transition: 0.5s; 
 
\t filter:alpha(opacity=50); 
 
    -moz-opacity:0.5; 
 
    -khtml-opacity: 0.5; 
 
    opacity: 0.5; 
 
    height:300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
<div class="image-box"></div> 
 
    </div>

來源

2016-06-08 12:49:38 Manish

你有沒有試圖改變.overlay &圖像框屬性

.image-box{ 
/* add position:relative */ 
} 
.overlay{ 
position:absolute; background-color:red; filter:alpha(opacity=50); opacity: 0.8; height: 100%; width: 100%; opacity: 1; z-index: 9; position: absolute; top: 0; opacity: 0.5;transition: 0.5s; 
}

雖然點擊圖像框，它會給你覆蓋在圖像 - 盒子

來源

2016-06-08 13:01:07

jquery img class overlay

回答

相關問題