小编Sea*_*han的帖子

如何使用CSS实现"淘汰"效果?

更新 -很确定我想出来了.代码有点长,但我在这里扔了一页,所以你可以查看源代码:http://www.sorryhumans.com/knockout-header

该概念基于:http://algemeenbekend.nl/misc/challenge_gerben_v2.html,然后根据我的需要进行调整.

标题响应并被淘汰.(请忽略不良,1分钟响应bg图像实现!).这个实现也没有使用任何CSS3,所以我认为兼容性不会有很多问题.

我发现的唯一问题是,当Chrome浏览器宽度为奇数(例如1393px)时,右侧流体柱与主中心柱之间存在1px的间隙.我没有在最新版本的Firefox,Internet Explorer中看到此问题,或者当宽度为偶数时(例如Chrome中的1394px).有任何想法吗?

原始问题: 我正在尝试编写我设计的标题,但我无法弄清楚如何获得我正在寻找的效果.请看附图(不,这实际上不是我正在做的:)只是一个例子!)

示例图片

照片是全宽响应照片.标题是全宽的,但其内容位于响应网格上,不超过任意大小(由黑线表示),但可以缩小.我可以完成所有这些,但是我弄清楚的是如何使标题栏在标志所在的位置变得透明.换句话说,我不想将标志放在栏杆顶部,而是想把它"敲出"标题.

这甚至可能吗?

html css

8
推荐指数
1
解决办法
2018
查看次数

标签 统计

css ×1

html ×1