Question

我希望background-image在当前状态下具有较低的不透明度，并在hover上增加不透明度。应该通过CSS中的选择器（因为我有很多类）来分配属性，因为我无法访问HTML代码。

由于某些原因，我的代码无法正常工作（hover上的不透明度应为1） - 请参阅下面的我的代码段。

有谁知道问题可能是什么？

非常感谢

大卫

＆＃13;

[class*=subcategory] {
  background-size: 20px !important;
  opacity: 0.1;
}

[class*=subcategory]:hover span {
  background-size: 20px !important;
  opacity: 1 !important;
}

.subcategory1:hover span {
  background-size: 50px !important;
}

＆＃13;

<div class="subcategory1">
  <span style="font-size: 100px; background-image: url(https://designmodo.com/wp-content/uploads/2015/03/designmodo-icon.png); background-size: 25px">I am in a mess</span>
</div>

＆＃13;

Answer 1

您的CSS中只丢失了一个范围。您还需要将初始不透明度应用于跨度。

见下文：

＆＃13;

[class*=subcategory] span {
  background-size: 20px !important;
  opacity: 0.1;
}

[class*=subcategory]:hover span {
  background-size: 20px !important;
  opacity: 1 !important;
}

.subcategory1:hover span {
  background-size: 50px !important;
}

＆＃13;

<div class="subcategory1">
  <span style="font-size: 100px; background-image: url(https://designmodo.com/wp-content/uploads/2015/03/designmodo-icon.png); background-size: 25px">I am in a mess</span>
</div>

＆＃13;

通过选择器将不透明度应用于背景图像

1 个答案: