zoukankan html css js c++ java

background-clip

背景裁切效果：background:url(Images/img.png) no-repeat -70px -50px;-webkit-background-clip:text; 必须先写背景图片，后加clip样式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        body
        {
            width:1024px; margin:0 auto;
        }
        .box
        { width:964px; margin:0 auto; position:absolute; top:200px; left:200px; font-family:AArial,'Microsoft YaHei'; text-align:center; color:rgba(255,255,255,0.1);
        }
        .box1
        {
            text-shadow:3px 3px 10px #000;
        }
        .box2
        {
            background:url(Images/img.png) no-repeat -70px -50px;-webkit-background-clip:text; -webkit-transition:1s all ease;
        }
        h1
        {
            font-size:140px; margin:0;
        }
        p
        {
            font-size:72px; margin:0;
        }
        .box2:hover
        {
            background-position:-70px -220px;
        }
    </style>
</head>
<body>
    <div class="box box1">
        <h1>别了，青春！</h1>
        <p>www.qinchun.com</p>
    </div>
    <div class="box box2">
        <h1>别了，青春！</h1>
        <p>www.qinchun.com</p>
    </div>
</body>
</html>

查看全文

相关阅读:
1007 Maximum Subsequence Sum（25 分）
1006 Sign In and Sign Out（25 分）
1005 Spell It Right
1004 Counting Leaves
Struts10分钟入门
 MyBais入门
 Hibernate注解
 save，flush，evict
HQL连接查询
 Hibernate-延迟加载和立即加载

原文地址：https://www.cnblogs.com/aimyfly/p/3154113.html