【问题标题】:Masking/Clipping div遮蔽/剪切 div
【发布时间】:2015-09-12 13:02:06
【问题描述】:

如何让 div #1(page-title) “剪切”通过 div #2(mainwrap) 并查看背景图像?

例子:

<div class="body">
<div class="mainwrap">
<div class="page-title">
</div>
</div>
</div>

CSS:

body {background-image: url("/background.jpg");}
.mainwrap {background: #fff}
.page-title {background: none;}

【问题讨论】:

  • 请同时提供您的 HTML 的基本结构。

标签: css svg mask clipping


【解决方案1】:

您需要使用位图图像或 SVG 来制作遮罩。

.mainwrap 需要应用mask。遮罩必须是白色背景上的黑色文本(孔)(白色表示保留)。

见:http://www.html5rocks.com/en/tutorials/masking/adobe/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-12-27
    • 2016-07-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多