如何实现chrome浏览器 新标签页的效果_html/css_WEB-ITnose

CSS Chrome

我想做一个类似chrome浏览器 新标签页的效果

遇到有3个问题，望大家指导

1.超链接 
上面是图片 下面是文字 
点中图片和文字都可以跳转到指定页面

可是我看标签下不能使用

标签
这种效果如果做出

是不是该这样？


  

  




2.图片自适应窗口大小
看了网上许多图片自适应窗口的例子
可是chrome这种效果还是模拟不出

3.点击超链接图片时
会有深灰色背景
这种效果css怎么做出


回复讨论(解决方案)

1.就那样就行
2.body尺寸设为百分比，img尺寸设为百分比，就是说img及其上级标签都未百分比尺寸就可以了
3.用半透明的层遮盖一下不就有灰色效果了

1.就那样就行
2.body尺寸设为百分比，img尺寸设为百分比，就是说img及其上级标签都未百分比尺寸就可以了
3.用半透明的层遮盖一下不就有灰色效果了

继续请教

针对问题2. 我也是用百分比设置尺寸
可是我发现 chrome浏览器在最大化和普通窗口下的图片长度占的百分比会不一致
这是怎么实现的？

针对问题3. 能告诉再详细点吗，我不是很明白

1.就那样就行
2.body尺寸设为百分比，img尺寸设为百分比，就是说img及其上级标签都未百分比尺寸就可以了
3.用半透明的层遮盖一下不就有灰色效果了

3 我做出来了 
用opacity设置透明度

2 还是有疑惑


1.就那样就行
2.body尺寸设为百分比，img尺寸设为百分比，就是说img及其上级标签都未百分比尺寸就可以了
3.用半透明的层遮盖一下不就有灰色效果了

3 我做出来了 
用opacity设置透明度

2 还是有疑惑

用meta 改一下不同宽度调用的CSS文件


1.就那样就行
2.body尺寸设为百分比，img尺寸设为百分比，就是说img及其上级标签都未百分比尺寸就可以了
3.用半透明的层遮盖一下不就有灰色效果了

3 我做出来了 
用opacity设置透明度

2 还是有疑惑
实在不行就window的resize事件中js获取页面的尺寸，然后设置img的width，height，并不复杂，js获取页面尺寸的代码百度搜一下就有了



1.就那样就行
2.body尺寸设为百分比，img尺寸设为百分比，就是说img及其上级标签都未百分比尺寸就可以了
3.用半透明的层遮盖一下不就有灰色效果了

3 我做出来了 
用opacity设置透明度

2 还是有疑惑
实在不行就window的resize事件中js获取页面的尺寸，然后设置img的width，height，并不复杂，js获取页面尺寸的代码百度搜一下就有了

ok
我另外查了网上，还可以用js获取屏幕尺寸，调用不用的css
问题解决，谢谢