位置固定的圆形图像 - css

我试图在chrome和mozilla中修正位置固定的图像，但它在某种程度上失败了。位置固定的圆形图像 - css

这里是我的CSS： -

.circular{ 

    -webkit-border-radius: 150px; 
    -moz-border-radius: 150px; 
    border-radius: 150px; 
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3); 
    border: 5px solid white; 
    overflow: hidden; 
    position: fixed; 
    height: 100px; 
    width: 100px; 
    left: 80px; 
    top: 20px; 
}

这里是我的html： -

<div class='circular'> 
       <div class='round-image'> 
       <img alt="Portfolio_page" src="/assets/portfolio_page.png" /> 
       </div> 
      </div>

这是两个结果在浏览器和Mozilla： - mozilla view chrome view

它出现得很好，直到我没有放置位置：固定并给出具体的高度和宽度

来源

2013-07-20 Dev R

什么Chrome浏览器版本？似乎对我来说工作得很好。 – Malcolm

同样在这里，我的版本也能正常工作（v28） – Sourabh

如何查看版本？ –

尝试添加：

.circular img { 
    position: static; 
}

如果不工作：

.circular{ 
    -webkit-transform: translateZ(0); 
}

我注意到，我可以得到同样的问题，如果IMG是位置：固定的。也许它在某种程度上继承了windows版本的chrome。变换可以强制重绘可能也解决它

信用为转变观念：Chrome rendering issue. Fixed position anchor with UL in body

来源

2013-07-20 19:21:35

它不能正常工作 –

Arg ..值得一试..也许尝试img本身的转换或作为远射试试zindex：-1对img –

位置固定的圆形图像 - css

回答

相关问题