Можете ли вы добавить только фон CSS класса в JQuery?

Question

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

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

Я просто хочу, чтобы фоновое изображение исчезло, а не текст Нажмите меня.Это возможно в jQuery?

Вот моя попытка:

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

Что, очевидно, не работает.Это просто псевдо-код.(

Answer 1

Это невозможно; у вас не может быть полупрозрачного фонового изображения, даже в HTML5. (AFAIK)

Вместо этого вы должны создать отдельный <div> элемент для фона и добавить его обычным образом.

Answer 2

Вы можете смоделировать то, что вы пытаетесь сделать, используя 2 абсолютных деления на вершине друг друга. Рассмотрим следующий сценарий.

<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);

Answer 3

jQuery изначально не поддерживает ничего подобного.Однако, посмотрите эту статью , чтобы увидеть, как это можно сделать с умно сконструированными фоновыми изображениями.

Эффект достигается с помощью функции animate и перемещения стиля backgroundPosition CSS.

Answer 4

Вам нужно будет создать свой текстовый div и расположить его перед другим «фоновым div», а затем затемнить фоновый div. Вы должны рассмотреть, если это необходимо сделать в первую очередь?