【发布时间】：2021-07-16 15:12:06
【问题描述】：
我希望我的输入字段显示一半在剪辑路径的渐变背景上，一半在它之外，但我无法获得它。请帮我解决这个问题。输入字段“立即免费试用！”并且下面 div 中的文本不完全可见。但是，我希望它通过保持渐变背景保持原样来完全正确地显示。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.signUpBtn:hover {
color: #FFF;
background: rgba(138, 147, 153, 0.75);
border: 2px solid rgba(80, 110, 133, 0.75);
}
.signUpBtn {
font-family: Raleway-SemiBold;
font-size: 13px;
color: rgba(183, 190, 196, 0.75);
letter-spacing: 1px;
line-height: 15px;
border: 2px solid rgba(141, 159, 173, 0.75);
border-radius: 40px;
background: transparent;
transition: all 0.3s ease 0s;
}
.tryUpBtn {
font-family: Raleway-SemiBold;
font-size: 13px;
text-align: center;
padding-bottom: 0;
color: rgba(183, 190, 196, 0.75);
letter-spacing: 1px;
line-height: 15px;
border: 2px solid rgba(141, 159, 173, 0.75);
border-radius: 40px;
background: rgba(194, 194, 193, 0.308);
transition: all 0.3s ease 0s;
margin-top: 70px;
}
.tryUpBtn:hover {
color: #FFF;
background: rgba(138, 147, 153, 0.75);
border: 2px solid rgba(80, 110, 133, 0.75);
}
.gradientSec {
width: 100%;
background: linear-gradient(57deg, rgb(245, 31, 209), rgb(49, 47, 199));
clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 0% 94%);
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bona+Nova&display=swap" rel="stylesheet">
<title>HRTech & InsuranceTech</title>
</head>
<body>
<div class="gradientSec">
<section class="">
<div class="container">
<div class="row">
<div class="left_side col-6">
<button type="button" class="tryUpBtn text-white font-weight-bold btn btn-primary mr-5 pr-3 pl-3"><h5>Try For Free Now!</h5></button>
<h1 class="text-capitalize text-white pt-4" style="font-family: 'Bona Nova', serif; letter-spacing: 2px; font-size: 52px;">Set your business up with modern payrolls, benefits, and HR</h1>
<div class="input-group ">
<input type="text" class="form-control" style="background-color: rgba(235, 215, 240, 0.308); filter: blur(0.3px);
-webkit-filter: blur(0.3px);">
<div class="input-group-append">
<button class="btn btn-primary" style="background-color: rgb(26, 71, 168);" type="button">Get Started</button>
</div>
</div>
<h5 class="text-secondary">Our plans were built to fit your unique needs. Streamline, onboarding, benefits, payroll, PTO, and more with our simple intutive paltform.</h5>
</div>
</div>
</div>
</section>
</div>
</body>
</html>文本未显示在剪辑路径背景上。 谢谢
【问题讨论】：
-
您不能剪切一个元素，然后期望元素的内容仍然显示在剪切区域之外。如果您只想将此效果应用于背景 - 那么您需要将其应用于不同的元素（可能定位在内容后面），该元素不包含您仍要显示的内容。