作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想做的是将鼠标悬停在我的图片上,然后使用 grayfade CSS 工具让它逐渐变灰。由于某种我不知道的原因,它不起作用,即使我已经在过渡上寻找了几个小时。请帮助我!
这是我的全部代码(尽管您想要查看的代码是样式标签中的 img 和 img:hover):
<!doctype html>
<html>
<head>
<title>Basketball Uniforms 1/24/14</title>
<style>
* {
margin: 0;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}
html {
background: url(assets/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
header {
width: cover;
padding: 2em;
background-color: rgba(17, 40, 87, 0.85);
border-radius: 0 0 2em 2em;
}
h1 {
text-align: center;
vertical-align: middle;
color: #FFBB00;
}
h2 {
text-align: center;
vertical-align: middle;
color: #FFBB00;
}
h3 {
text-align: center;
vertical-align: middle;
color: #FFBB00;
}
table {
margin-left: auto;
margin-right: auto;
border-collapse: separate;
border-spacing: 0 2em;
}
td {
border-style: groove;
border-width: 2em;
border-color: rgba(59, 59, 59, 0.95);
border-radius: 4em;
padding: 4em;
}
.odd {
background-color: rgba(242, 153, 51, 0.80);
color: #22499C;
}
.even {
background-color: rgba(51, 112, 242, 0.80);
color: #FEBB2D;
}
img {
width: 26em;
height: 20em;
border-radius: 1em;
-webkit-transition: -webkit-filter 0.5s ease;
-moz-transition: -moz-filter 0.5s ease;
-ms-transition: -ms-filter 0.5s ease;
-o-transition: -o-filter 0.5s ease;
transition: filter 0.5s ease;
}
img:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(assets/grayscale.svg);
filter: gray;
}
h4 {
padding-top: 1em;
text-align: center;
}
h5 {
text-align: center;
}
footer {
width: cover;
padding: 2em;
background-color: rgba(17, 40, 87, 0.85);
border-radius: 2em 2em 0 0;
}
</style>
</head>
<body>
<header>
<h1>Basketball Uniforms Through the Ages</h1>
<h2>Leo Alfred: 1/24/2013</h2>
</header>
<table>
<tr>
<td class="odd">
<a href="http://uniformcritics.com/basketball/nba/portland-trail-blazers/1970-trail-blazers-debut-road-uniform-vintage-retro-throwback/">
<img src="assets/1970.jpg" title="1970's Basketball" alt="1970's Basketball">
</a>
<h4>Portland Trail Blazers</h4>
<h5>1970 - 1971 Debut Road Uniform</h5>
</td>
</tr>
<tr>
<td class="even">
<a href="http://uniformcritics.com/basketball/nba/golden-state-warriors/1980s-warriors-away-california-uniform-vintage-retro-throwback/">
<img src="assets/1980.jpg" title="1980's Basketball" alt="1980's Basketball">
</a>
<h4>Golden State Warriors</h4>
<h5>1980 - 1985 Road Uniform</h5>
</td>
</tr>
<tr>
<td class="odd">
<a href="http://uniformcritics.com/basketball/nba/milwaukee-bucks/1990s-bucks-road-uniform-throwback/">
<img src="assets/1990.jpg" title="1990's Basketball" alt="1990's Basketball">
</a>
<h4>Milwaukee Bucks</h4>
<h5>1993 - 2005 Road Uniform</h5>
</td>
</tr>
<tr>
<td class="even">
<a href="http://uniformcritics.com/basketball/nba/la-clippers/2000s-clippers-away-uniform-red/">
<img src="assets/2000.jpg" title="2000's Basketball" alt="2000's Basketball">
</a>
<h4>LA Clippers</h4>
<h5>2000 - 2009 Away Uniform</h5>
</td>
</tr>
<tr>
<td class="odd">
<a href="http://www.spartanjerseys.com/michigan-state-basketball-jersey/2010-2011/">
<img src="assets/2010.jpg" title="2010's Basketball" alt="2010's Basketball">
</a>
<h4>Michigan State Spartans</h4>
<h5>2010-2011 Uniform</h5>
</td>
</tr>
</table>
<footer>
<h2>An LFX Design Website</h2>
<h3>© 2014 LFX Design</h3>
</footer>
</body>
</html>
在此先感谢您帮助我解决过渡灰度渐变问题!
最佳答案
重新排序 transition
属性,似乎有一些干扰。放置 transition: filter 0.5s ease
首先似乎修复了它。我认为这与它正在覆盖其他前缀属性这一事实有关。
img {
transition: filter 0.5s ease;
-moz-transition: -moz-filter 0.5s ease;
-ms-transition: -ms-filter 0.5s ease;
-o-transition: -o-filter 0.5s ease;
-webkit-transition: -webkit-filter 0.5s ease;
}
img:hover {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(assets/grayscale.svg);
filter: gray;
}
使用 all
时不会发生这种情况,(example)因此我假设使用 -webkit-filter
作为属性值存在问题。我猜这是与浏览器支持相关的问题。
关于HTML 过渡不适用于 Grayfade,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21347302/
我想做的是将鼠标悬停在我的图片上,然后使用 grayfade CSS 工具让它逐渐变灰。由于某种我不知道的原因,它不起作用,即使我已经在过渡上寻找了几个小时。请帮助我! 这是我的全部代码(尽管您想要查
我是一名优秀的程序员,十分优秀!