在多個跨度背景上顯示絕對圖像
[英]Reveal absolute image over multiple span backgrounds
問題描述
我正在開發一個會定期創建新跨度的程序。 僅使用所述跨度的樣式，我如何屏蔽圖像以便將圖像的某些部分顯示為這些跨度的背景？ 或者這是不可能的。
我試過了
mask-image: url("image-url.png")
但無法讓它工作
2 個解決方案
解決方案1
1 已采納 2021-11-30 14:21:27
我用background-attachment: fixed;
它將圖像相對於視口放置，因此無論跨度在哪里，它都相對於同一個 position。
解決方案2
0 2021-11-21 03:01:02
不完全確定這是否是您的意思。 您可以使用：
background-position: center left;
background-size: cover;
它就像一個面具，你可以使用左、右、中心或百分比來改變背景位置。
看到這個片段：
<html> <head> <style> body { padding: 0; margin: 0; }.container { display: flex; height: 300px; flex-direction: column; }.stripe { grid-column: 1 / -1; height: 100%; display: grid; grid-gap: 0; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }.stripe span { background-repeat: no-repeat; background-size: cover; margin: 6px; } </style> </head> <body> <div class="container"> <div class="stripe"> <span style=" background-position: center right; background-image: url('https://live.staticflickr.com/8617/16110508435_486b0eeb81_b.jpg');"></span> <span style=" background-position: center; background-image: url('https://live.staticflickr.com/8617/16110508435_486b0eeb81_b.jpg');"></span> <span style=" background-position: center left; background-image: url('https://live.staticflickr.com/8617/16110508435_486b0eeb81_b.jpg');"></span> </div> </div> </body> </html>
將鼠標懸停在div上以顯示jQuery的嵌套范圍
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.