jquery - 可以调整大小或仅移动元素的背景颜色吗？

Question

我有一个 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 像素的高度。在将鼠标悬停在实际框上时有什么可能的方法吗？

谢谢。

Answer 1

您可以在此 div 中引入另一个 div，并设置以下 css 属性:

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

position: absolute 会将此 div 从正常流中移除，其后的元素将置于其下方。这是 z-index 出现的地方，将其设置为 -1 或小于其位置的其他元素的值。这将使其他元素呈现在您的 div 之上。

检查这个 jsfiddle 供引用