background-clip

最新推荐文章于 2025-08-23 08:00:22 发布

weixin_34236497

最新推荐文章于 2025-08-23 08:00:22 发布

阅读量103

点赞数

文章标签： xhtml

背景裁切效果：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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。