使用 CSS3 悬停时的背景图像不透明度过渡

Posted 2023-03-06

【中文标题】使用 CSS3 悬停时的背景图像不透明度过渡

【英文标题】：background-image opacity transition on hover with CSS3

【发布时间】：2012-05-28 01:16:01

【问题描述】：

当用户将光标放在链接上时，我正在尝试使用背景图像不透明度（从 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 有人知道吗？ 提前致谢！

【参考方案1】：

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

通过更改背景图像暗示您想要的过渡（某些浏览器不会将其显示为淡入淡出过渡，如早期版本的 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;没有办法在不存在的图像和新的图像之间显示动画，所以没有淡入淡出的过渡.

如果您真的想要这个动画，请尝试使用包含您的As 的剪辑框（LI 可以），并给A 一个半径边框和一个background-color。

【讨论】：

有没有办法过渡 rgba 不透明度？

@WillHancock 您可以进行 rgba 过渡，它的工作方式与 rgb 颜色相同。

【参考方案2】：

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

类似的东西。

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>