2

当用户将光标放在链接上时，我正在尝试使用背景图像不透明度（从 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，但不适用于其他人。你可以在这里看到它的样子 有人知道吗？提前致谢！

4

2 回答 2

1

我会使用:before继承的元素background-image。

像这样的东西。

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;
}
<a href="#">I am link</a>

更新 - 如果您想为相同的背景图像设置动画，则如下所示：

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;
}
<a href="#">I am link</a>

于 2015-02-25T08:23:32.413 回答
1

通常 CSS3 的过渡动画只适用于现有的 CSS 属性，比如 background-image 和 background-position。没有背景不透明度字段可以满足您的需求。当属性发生变化时，就会发生转换。

通过更改 background-image 来暗示您想要的转换（某些浏览器不会将其显示为淡入淡出转换，如早期版本的 firefox），在这种情况下， a 的两个不同状态.current_page_item a将是background-image: url(img/current_page.png);and 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包含您A的 s 的剪辑框（可行），并给出A半径边框和background-color.

于 2012-05-21T15:10:09.507 回答