Question

当用户将光标放在链接上时，我正在尝试使用背景图像不透明度（从0到100％）转换。我有这样的感觉：

<div class="menu">
 <ul class="sf-menu">
  <li class="page_item page-item-2">
    <a href="http://filip-hostel.pl/?page_id=2">o nas</a></li>
  <li class="page_item page-item-6">
    <a href="http://filip-hostel.pl/?page_id=6">oferta</a></li>
  <li class="page_item page-item-8">
    <a href="http://filip-hostel.pl/?page_id=8">galeria</a></li>
  <li class="page_item page-item-10 current_page_item">
   <a href="http://filip-hostel.pl/?page_id=10">cennik</a></li>
  <li class="page_item page-item-12">
   <a href="http://filip-hostel.pl/?page_id=12">kontakt</a></li>
 </ul>
</div>

和CSS：

    .sf-menu a, .sf-menu a:visited{
border:none;
color:#ffffff;
font-family:Arial;
font-size:16px;
line-height:72px;
width:65px;
text-align:center;
padding:0px;
margin:0;
background:none;
-webkit-transition: 1.0s ease-in;
    -moz-transition: .01s ease-in;
    -o-transition: 1.0s ease-in;
    -ms-transition: 1.0s ease-in;
    transition: 1.0s ease-in;

}

.sf-menu li:hover{
background:none;
}

.sf-menu a:hover{
background: url(img/menu_hover.png) center center no-repeat;

}

.current_page_item a{
background: url(img/current_page.png) center center no-repeat;
}

它适用于current_page_item但不能正常工作。您可以看到它的外观HERE Doeas有谁有任何想法？提前谢谢！

Answer 1

一般来说，CSS3的过渡动画仅适用于现有的CSS属性，比如背景图像和背景位置。没有背景不透明度字段可满足您的需求。当财产发生变化时会发生转变。

通过更改背景图像（一些浏览器不会将此显示为淡入淡出过渡，如早期版本的firefox）暗示您所需的过渡，在这种情况下，.current_page_item a的两个不同状态将是background-image: url(img/current_page.png);和background-image: url(img/menu_hover.png);，其他属性相同，例如background-position。但是对于.sf-menu a，这两种状态是完全不同的，从background-iamge: none; background-position: left top;到background-image: url(img/menu_hover.png); background-position: center center;无法在不存在的图像和新图像之间显示动画，所以没有淡出过渡。

如果您真的想要这个动画，请尝试使用包含LI s的剪辑框（A可行），并为A提供半径边框，并{{1} }。

Answer 2

我会使用继承:before的{{1}}元素。

像这样。

＆＃13;

background-image

＆＃13;

a {
  background: black url('http://umea.ee/thumb.jpg') 0 0 no-repeat;
  background-size: 0 0;
  color: white;
  display: inline-block;
  padding: 1em;
  position: relative;
  z-index: 1;
}
a:before {
  background-image: inherit;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 100%;
  left: 0px;
  opacity: 0.5;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: -1;
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
}
a:hover:before {
  opacity: 1;
}

＆＃13;

更新 - 如果你想为同一个背景图像添加动画，那么就像这样：

＆＃13;

<a href="#">I am link</a>

＆＃13;

a {
  background: black url('http://umea.ee/thumb.jpg') top left no-repeat;
  background-size: 100% 200%;
  color: white;
  display: inline-block;
  padding: 1em;
  position: relative;
  z-index: 1;
}
a:before {
  background: inherit;  
  background-size: inhertit;
  background-position: bottom right;
  content: '';
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: -1;
  opacity: 0;
  -webkit-transition: opacity 300ms;
  transition: opacity 300ms;
}
a:hover:before {
  opacity: 1;
}

＆＃13;

使用CSS3悬停时的背景图像不透明度转换

2 个答案: