css图片自适应
之前都是用background-size:cover
,但是有个问题。
全屏效果:
缩小一半后:
用了cover,自适应原来是从左上角开始缩放的。右边就被截掉了。
试试
background-repeat: no-repeat;
background-size: 100% 100%;
结果,真是自适应,宽高全部缩放
但是如果图片比例不一致的话,很容易变行。。
没办法试试
background:url(pp/contact.jpg) no-repeat center center fixed;
background-size: cover;
好吧,还是切割了,不过以图片中心缩放,还可以接受。具体用那种方法要具体看图片了。
滚动视差效果
很炫酷的一个特效。
具体是用了background-attachment:fixed
实现。将背景图相对于windows窗口固定,再来回切换,可以实现这种视差效果,很简单的。
html页面内跳转
比如导航条有个 作品 按钮,页面有一部分是展示作品的,那么就可以用锚点来实现页面内跳转。
具体代码如下:
<a href="#homes">作品</a>
<a name="homes"></a>
使用<a name="homes"></a>
创建一个锚点,使用<a href="#homes"></a>跳转到锚点。