Question

这可能是与div ID和类有关的初学者问题，但我已将webkit代码应用于我的CSS表格，并希望在图像到图像的基础上使用过滤器。我无法分割过滤器，它们正在应用于我的所有图像。以下是我的代码：

CSS：

img { 
    -webkit-filter: brightness(18%);
    -webkit-transition: all 5s ease;
    -moz-transition: all 5s ease;
        -o-transition: all 5s ease;
    -ms-transition: all 5s ease;
        transition: all 5s ease;
}

img:hover {
    -webkit-filter: brightness(100%); 
}

HTML：

<div id="img">
<a href="design.html">
  <img src="designwork.png"  width="100%" height="100">
<a href="travel.html">
  <img src="zurich.png" alt="fivera" width="100%" height="50">
<a href="graphics.html">
  <img src="graphics.png" alt="fivera" width="100%" height="50">
<a href="3dmodeling.html">
  <img src="3dmodeling.png" alt="fivera" width="100%" height="50">
</div>

感谢您的帮助。

Answer 1

您需要使用css类。您可以向任何dom元素添加一个或多个类，例如

<img>, <div>, <p>

等。你会这样做：

<img class="filter" src="designwork.png"  width="100%" height="100">

然后在你的CSS中你可以使用the将样式应用于类。标识符

CSS

.filter { 
 -webkit-filter: brightness(18%);
 -webkit-transition: all 5s ease;
   -moz-transition: all 5s ease;
     -o-transition: all 5s ease;
    -ms-transition: all 5s ease;
        transition: all 5s ease;
}

如何将webkit应用于每个图像

1 个答案: