Safari中的CSS转换背景图像跳转盘点

Question

我在Safari中遇到了转换效果问题，可以使用一些帮助。我的CSS悬停交换背景图像，因为它应该，但悬停图像从它的位置'跳'，向上和向左（我不想发生）。谢谢。

结构：

.sidebar .widget { 
 
\t height: 276px; 
 
\t width: 326px; 
 
\t background:url('/wp-content/themes/a-theme/svg/polygon-image.svg') no-repeat center center; 
 
\t background-size: 100%; 
 
} 
 

 
.sidebar .widget:hover { 
 
\t background:url('/wp-content/themes/a-theme/svg/polygon-image-hover.svg') no-repeat center center; 
 
\t background-size: 100%; 
 
\t transition: 0.5s ease-in-out; 
 
}

<div class="sidebar"> 
 
\t <aside id="black-studio-tinymce-18" class="widget widget_black_studio_tinymce"> 
 
\t \t <div class="textwidget"> 
 
\t \t \t <h3 style="text-align: center;">Sample Text<br></h3> 
 
\t \t </div> 
 
\t </aside> 
 
</div>

Answer 1

避免浏览器漏洞和清洁：

.sidebar .widget { 
    height: 276px; 
    width: 326px; 
    background-repeat:no-repeat; 
    background-position: center center; 
    background-image:url(/wp-content/themes/a-theme/svg/polygon-image.svg); 
    background-size: 100%; 
    transition:background-image 0.5s ease-in-out; 
} 
.sidebar .widget:hover { 
    background-image:url(/wp-content/themes/a-theme/svg/polygon-image-hover.svg); 
} 

Answer 2

从你们的帮助，我修改了我的CSS得到正是我需要的。我有一个多边形形状的背景图像和中间的图形。我保留了该图形，并使用了一个CSS多边形来代替形状，现在我的悬停效果可以在Firefox，Chrome和Safari中使用。

请参阅下面的CSS，并再次感谢回复。

sidebar .widget { 
 
\t background: url('/wp-content/uploads/2017/08/image.png') no-repeat center center; 
 
\t background-color: rgba(255, 165, 0, 0.85); 
 
\t background-size: 70%; 
 
\t -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); 
 
\t clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); 
 
\t height: 276px; 
 
\t width: 326px; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
} 
 

 
.sidebar .widget:hover { 
 
\t background: url('/wp-content/uploads/2017/08/image.png') no-repeat center center; 
 
\t background-color: rgba(108, 218, 244, 0.8); 
 
\t background-size: 80%; 
 
\t -webkit-clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); 
 
\t clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); 
 
\t height: 276px; 
 
\t width: 326px; 
 
\t transition: 0.5s ease-in-out; 
 
}