1
我正在更改懸停時元素的背景位置,它在鉻上正常工作,但是當我在safari上嘗試時,背景會快速上下跳動,我試過應用一些修正我從谷歌搜索發現,它仍然沒有工作,這裏是代碼(HTML,原來的規則,轉換屬性和:懸停規則) - 我找到了答案背景位置轉換在Safari中不起作用
<div class="port-big">
<a class="port-item campbell" href="http://www.campbellmgmt.com/" target="_blank">
<div class="port-img"></div>
<h3 class="port-title">Campbell Property Management</h3>
<img class="port-logo" src="images/campbell-logo-white.png" />
<p class="port-descr">Campbell Property Management was my largest project while I was at Juvo Web. The client was looking to completely update their website and
add some new features. After extensive research on property and real estate UI/UX I designed the new front end and implemented it on their website.</p>
</a>
</div>
.port-img {
overflow: hidden;
width: 100%;
height: 100%;
background-blend-mode: overlay;
background-size: cover;
background-position: center top;
background-position-x: 0%;
background-position-y: 0%;
}
.campbell .port-img {
background-image: url(../../images/campbell-screenshot.png);
background-color: #dd3a00;
}
.port-title, .port-descr, .port-logo, .port-img {
-webkit-transition: all ease-in-out 0.4s,
background-position linear 24s;
transition: all ease-in-out 0.4s,
background-position linear 24s;
}
.port-big .port-item:hover .port-img {
background-position: center bottom;
background-position-x: 0%;
background-position-y: 100%;
}
你能否提供html以及我們可以測試它? – Kiwad
我已添加html – Davez01d
''標記不需要結束斜線。 – Rob