可能調整大小或移動元素的背景顏色？

我有一個div與css規則有background-color定義。想知道是否有可能只是改變位置或背景色（不是div元素中任何的大小呢？如果是的話，任何人都可以幫我做這件事？可能調整大小或移動元素的背景顏色？

HTML結構

<div class="col-6 no-padding blue-box-0 blue-box-b blue-box-right"> 
<img src="/media/2680859/meet-plannerresources.jpg" alt=""> 
<h3>Professional Planner Resources</h3> 
<p>Our award-winning Convention Services team is eager to assist you in your planning efforts from beginning to end.</p> 
<h4>Meeting Planners</h4> 
<a href="/meet/planning-tools/" class="red-arrow"></a> 
<a class="bluehitbox" href="/meet/planning-tools/"></a> 
</div>

它渲染一個像模型一樣的盒子，我想要做的就是改變背景的大小或位置（如果父母有overflow:hidden這可能會起作用，那麼我們可以改變它的背景大小或位置），然後將它放到div元素的底部，使其大約爲70像素在高度。這是可能的CSS或甚至jQuery？

下面附加的圖像如何將背景顏色（圖像上的藍色rgba值）縮放或定位到距框底部70像素高度。無論如何可能的方式來做到這一點在鼠標懸停在實際的盒子？

Need Image to drop down

感謝。

來源

2014-04-10 Solomon Closson

你能創建的jsfiddle？請？ – hjpotter92

我不明白你想要什麼，但背景位置只適用於圖像。你可以做的是通過添加邊框或邊距來「移動」。 –

問題是'z-index'，所以如果我將jQuery應用於它，在懸停時，它會滑下來，導致我不再有背景顏色的元素...但是，如果它被設置就像我擁有它，我會永遠在那個元素，因爲它是父元素'藍色盒-0' –

您可以介紹一下里面的這個具有以下CSS屬性的div另一個DIV設置：

.className{ position: absolute; z-index: -1; }

position: absolute會從正常流中刪除這個div和元素下面這將是置於其下。這是z-index進入圖片的位置，將其設置爲-1或其值小於其他元素的值。這將使其他元素呈現在你的div上。

檢查這個jsfiddle參考

來源

2014-04-10 19:33:49 Varun

問題是'z-index'，所以如果我將jQuery應用於它，懸停時，它會滑下來，而我的鼠標仍然在元素上，導致我不再具有背景色的元素。 ..但是，如果它是像我這樣設置的，我會永遠在那個元素上，因爲它是父元素'blue-box-0' –

在你的'：hover'定義中，確保你有'z-index '集合。 – Varun

謝謝，不得不使用'z-index'值，但是使用這種方法得到了它的工作。歡呼:) –

與您的問題相關，您不能僅更改背景顏色的位置或大小，因爲它總是會填滿整個背景顏色。

爲了「向下移動」或「向上移動」，您可以使用margin-top來移動div'向下'並因此移動背景顏色。

來源

2014-04-10 18:56:31

我可以移動div下來就好了，現在的問題是，當我的鼠標是如何保持它下來不再是具有「背景色」的元素？假設我將需要'hover'事件的多個選擇器？ –

可能調整大小或移動元素的背景顏色？

回答

相關問題