我正在使用以下代碼來掩蓋 svg 文本中的背景視頻以及周圍的一些其他文本。vh我的問題是，盡管我使用和單位，但白色文本在調整大小時不會保持其位置vw。并且白色標題和白色描述到MASK的距離不一樣。body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";.font-serif font-family: Georgia, Cambria, "Times New Roman", Times, serif;.font-mono font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; margin: 0; padding: 0;}.container { position: relative; height: 100vh; width: 100%; background: #000;}.headline-wrapper { position: absolute; top: 2vh; left: 1.4%;}.headline { margin: 0; font-size: 8vw; font-weight: 600; color: #fff; text-transform: uppercase;}.description-wrapper { position: absolute; top: 70vh; left: 1.4%;}.description { margin: 0; font-size: 4vw; font-weight: 400; color: #fff;}.video-wrapper { position: relative; overflow: hidden; clip-path: url(#mask);}.video { width: 100%; height: 100vh; object-fit: cover; }.mask-text { text-anchor: start; font-size: 16vw; font-weight: bold;}<section> <div class="container"> <div class="headline-wrapper"> <h3 class="headline">Headline</h3> </div> <div class="description-wrapper"> <p class="description">Description</p> </div> <div class="video-wrapper"> <video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" muted loop autoplay="true"></video> <svg><clipPath id="mask"><text class="mask-text" x="2%" y="55vh">MASK</text></clipPath></svg> </div> </div></section>我的目標是將白色文本保持在其位置，始終與 MASK 文本保持相同的距離，以便它具有響應能力。如何才能實現這一目標？有沒有一個 only-css 解決方案？
1 回答
呼喚遠方
TA貢獻1856條經驗 獲得超11個贊
我會將元素放置在中心周圍，然后使用平移來偏移它們。我還將考慮使用遮罩而不是剪輯路徑，以輕松使其位于中心。
viewBox更改 SVG 時，您可能需要調整font-family
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 100vh;
background: #000;
color: #fff;
}
.headline-wrapper {
position: absolute;
top: 50%;
transform:translateY(-180%);
left: 1.4%;
}
.headline {
margin: 0;
font-size: 8vw;
font-weight: 600;
text-transform: uppercase;
}
.description-wrapper {
position: absolute;
top: 50%;
transform:translateY(120%);
left: 1.4%;
}
.description {
margin: 0;
font-size: 4vw;
font-weight: 400;
}
.video-wrapper {
height: 100%;
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 70 12"><text font-family="monospace">MASK</text></svg>') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 70 12"><text font-family="monospace">MASK</text></svg>') center/contain no-repeat;
}
.video {
width: 100%;
height: 100%;
object-fit: cover;
display:block;
}
.mask-text {
text-anchor: start;
font-size: 16vw;
font-weight: bold;
}
<section>
<div class="container">
<div class="headline-wrapper">
<h3 class="headline">Headline</h3>
</div>
<div class="description-wrapper">
<p class="description">Description</p>
</div>
<div class="video-wrapper">
<video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" muted loop autoplay="true"></video>
</div>
</div>
</section>
- 1 回答
- 0 關注
- 138 瀏覽
添加回答
舉報
0/150
提交
取消