主页 / 问题 / 1447550
Accepted
user518983
Asked:2022-09-11 13:21:40 +0800 CST2022-09-11 13:21:40 +0800 CST

如何在css中制作剪切文本效果？

  • 772

我正在尝试制作剪切文本的效果，如图所示。通过混合混合模式尝试，它可以工作，但是当我放置白色背景时，字母也是白色的。有没有可能在图片中做类似的事情？毕竟，现在我通过 background-image 在背景和文本的背景上插入了一张图片

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

.test {
    background-image: url(https://kartinkin.net/uploads/posts/2021-07/thumbs/1625664173_41-kartinkin-com-p-oboi-s-tsvetami-krasivie-42.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
}

.title {
    font-size: 100px;
    position: absolute;
    top: 50%;
    right: calc(50% - 250px);
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: url(https://kartinkin.net/uploads/posts/2021-07/thumbs/1625664173_41-kartinkin-com-p-oboi-s-tsvetami-krasivie-42.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    clip-path: polygon(49.2% 0, 100% 0%, 100% 100%, 50% 100%);
    background-color: #fff;
    pointer-events: none;
    z-index: 11;
}

.subtitle {
    content: 'FLOWERS';
    position: absolute;
    color: #fff;
    top: 50%;
    right: calc(50% - 250px);
    font-size: 100px;
    clip-path: polygon(0 0, 49.2% 0, 50% 100%, 0 100%);
    pointer-events: none;
}

.white {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50.1%;
    background-color: #fff;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Test</title>
</head>

<body>
    <section class="test">
        <h1 class="title">FLOWERS</h1>
        <h1 class="subtitle">FLOWERS</h1>
        <div class="white"></div>
    </section>
</body>

</html>
在此处输入图像描述

html

0 个回答

  1. Best Answer

    .container {
 /* background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(10,38,76,1) 50%, rgba(10,38,76,1) 100%); */
     background-image: url('https://kartinkin.net/uploads/posts/2021-07/thumbs/1625664173_41-kartinkin-com-p-oboi-s-tsvetami-krasivie-42.jpg');
    background-repeat: repeat-y;
    background-size: 50% auto;
}
#demo-text {
    font-size: 80px;
    font-weight: 700;
    color: transparent;
    background: linear-gradient(to right, white 0%, white 50%, #0000ff00 50%), url(https://kartinkin.net/uploads/posts/2021-07/thumbs/1625664173_41-kartinkin-com-p-oboi-s-tsvetami-krasivie-42.jpg);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    -webkit-background-size: contain;
    background-size: contain;
}
    <div class="container">
<div id="demo-text">BOUQUETS</div>
</div>

    • 2

相关问题