你能在 jQuery 中只淡入一个类的背景 css 吗？答案

【问题标题】：Can you fade in just the background css of a class in jQuery?你能在 jQuery 中只淡入一个类的背景 css 吗？
【发布时间】：2023-04-03 09:45:02
【问题描述】：

.myDiv {
   background: url(/images/myimage.jpg);
   margin: 0 auto;
}

<div class="myDiv">
  Click Me!
</div>

我只希望背景图像褪色，而不是文本 Click me。这在 jQuery 中可能吗？

这是我的尝试：

  $(".myDiv").hover(function() {
 $(this).css("background", fadeTo("slow", 0.5))
  },function(){
  $(this).fadeTo("slow", 1.0);
});

这显然行不通。这只是伪代码。 :(

【问题讨论】：

我不认为这是可能的，但是有一个解决方法。 HTML结构可以改变吗？

标签： jquery user-interface hover fade

【解决方案1】：

这是不可能的；即使在 HTML5 中，您也不能拥有半透明的背景图像。（AFAIK）

相反，您应该为背景制作一个单独的<div> 元素并正常淡入。

【讨论】：

你的评分是我在 SO 上见过的最高的。我很荣幸有一个被你淘汰的答案。 :D

【解决方案2】：

您可以使用 2 个绝对 div 相互叠加来模拟您尝试执行的操作。考虑以下场景。

<div class="my-div">
    <div class="my-background"></div>
    <span class="my-text">Some text here</span>
</div>

CSS

.my-div {
    position: relative;
    width: 100px;
    height: 20px;
}
.my-background {
    position: absolute;
    background: url(bg.jpg);
    width: 100px;
    height: 20px;
    z-index: 2;
}
.my-text {
    position: absolute;
    z-index: 3;
}

基本上我已经创建了一个 div，在其中放置了一个带背景的 div，并在顶部放置了一个文本元素。

您现在可以使用

轻松淡化背景

$(".my-background").fadeTo("slow", 0.5);

【讨论】：

【解决方案3】：

您必须创建文本 div 并将其放置在另一个“背景 div”的前面，然后淡出背景 div。您应该首先考虑是否有必要这样做？

【讨论】：

【解决方案4】：

jQuery 本身不支持类似的东西。不过请查看article，了解如何使用设计巧妙的背景图片来实现。

效果是通过使用 animate 函数和移动 backgroundPosition CSS 样式来完成的。

【讨论】：