html - div内的剪辑路径

Question

我正在尝试制作一个像这个例子一样的剪辑路径掩码：http: //html.blahlab.com/tato/ 但我遇到了以下问题：掩码位于页面的左上角，但它没有不要像示例一样“跟随”链接的 div。

我的页面是： http: //mmazza.com/

score 0 · Accepted Answer

尝试到这里

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

.container {
	width: 600px;
	margin: 50px auto;
	position: relative;
}
section	{
	margin-top: 50px;
	position: relative;
	min-height: 250px;
}
.overflow .rect {
	width: 200px;
	height: 200px;
	background-color: #eaeaea;
	overflow: hidden;
	margin: 0 auto;
}

.overflow .circle {
	width: 200px;
	height: 200px;
	border-radius: 100px;
	background-color: #601785;
	position: relative;
	left: 100px;
}

.clip .circle {
	width: 200px;
	height: 200px;
	border-radius: 100px;
	background-color: #601785;
	position: absolute;
	clip: rect(0px,100px,200px,0px);
	margin: 0 auto;
}

.text h1 {
	font-family: Arial;
	font-size: 5em;
	text-align: center;

	background-image: url(http://demo.hongkiat.com/css-masking/Galaxy.jpg);

	-webkit-background-clip: text;
	background-clip: text;

	color: rgba(0,0,0,0);
}

<link href="http://necolas.github.com/normalize.css/2.0.1/normalize.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
	<title>Masking and Clipping on the Web</title>
	
	<link rel="stylesheet" href="style.css">
	<style>
	h1{
		font-size:90px;
	}
	</style>
</head>
<body>
<div class="container">


<section class="text cf">

<h1>CLIP</h1>




</section>
</div>
</body>
</html>

html - div内的剪辑路径

1 回答 1

Related