2015-05-19 110 views
0

我想设置固定的图像我有一个移动视图页面的顶部位置设置位置固定

enter image description here

.fixed { 
    position: fixed; 
    } 

这与离子

<div class="item item-image polygon"> 
    <img src="http://urbanetradio.com/wp-content/uploads/2014/10/banner.jpg" 
     class="fixed"> 
</div> 

这里是我需要的,但固定

enter image description here

UPDATE

这里是一个JSBin,我已经把它贴在图像的背景,但我无法看到图像http://jsbin.com/puxavoveci/2/edit?html,css,output

+0

你是什么意思_...但固定?_它不固定?你需要添加一些坐标:'top:0'等? –

+0

@KevinBoucher查看更新:) – TheUnnamed

回答

0

CSS:

.fixed{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

试试这个。希望这可以帮助。

但我想把图像作为只有img不会得到您想要的输出。我认为你需要把这个图像放在div中,并将其作为背景图像,并给出一个CSS的background-attachment: fixed;

或者,你可以请为你的html结构提供一些小提琴。只是想看看它和增强我的回答更相关的一个

编辑:

CSS:

.fixed { 
    background-image: url('http://urbanetradio.com/wp-content/uploads/2014/10/banner.jpg'); 
    background-attachment: fixed; 
    width: 100%; 
    height: auto; 
    min-height: 400px; 
    background-size: cover; 
    background-position: center; 
    overflow: hidden; 
    background-repeat: no-repeat; 
} 

我说得对与我有针对性的课吗? :)希望这会工作。

+0

你可能是正确的背景/ div的东西。我可以修复图像,但只能使用'width:100vh'来拉伸它。 –

+0

你的意思是背景图像可以通过给予'div'宽度:100%的CSS来进行伸展;'?我认为你可以通过给div一个'background-size:cover'的CSS来展开背景图片;' – John

+0

没有拍摄图片,这里是Plunker http://plnkr.co/edit/9tYTPM7DaRfn2QY41UOz?p=preview – TheUnnamed

0

试试这个。测试错误。

z-index:-1将使其位于页面其余部分下方1层,以便其他内容将在其上滚动。

.absolute { 
     position: absolute; 
     top:0px; 
     left:0px; 
     width:100%; 
     z-index:-1; 
      } 
    <div class="item item-image polygon"> 
     <img src="http://urbanetradio.com/wp-content/uploads/2014/10/banner.jpg" 
      class="absolute"> 
    </div> 
+0

图片消失 – TheUnnamed

+0

试试这里http://jsbin.com/puxavoveci/2/edit?html,css,output – TheUnnamed

+0

试试吧z-index的。我刚添加它。没有意识到你想让页面内容在其上滚动。 –