寬度和高度 100% 不適用於彈出圖像

Question

我有一個聯系我按鈕，但是，每當有人將鼠標懸停在按鈕上時，我都希望出現全屏圖像背景。 但是，此圖像不是全屏顯示。

 a { text-decoration: none; color: white; /*Let's Chat colour*/ } .Oval { position: relative; font-family: 'Open Sans', sans-serif; top: 510px; text-align: center; font-size: 25px; text-color: white; left: 30%; z-index: 75; background-color: orange; width: 140px; height: auto; background: #162129; border-radius: 40px; padding: 0px; text-decoration: none; } .Oval:hover { position: relative; } .Oval:hover:after { content: url(Lightning1.JPG); display: block; position: absolute; center: 100%; top: -510px; opacity: 0.5; z-index: -10; height: 100%; width: 100%; }

 <div class="Oval"><a href="mailto:">Let's Chat</a></div>

Answer 1

CSS 屬性position:absolute精確到：

它相對於其最近定位的祖先定位

1. 如果你想讓背景圖片占據整個屏幕空間，那么可以通過CSS屬性position:fixed來實現，你可以將它放置在相對於視口的位置。 然后將頂部、底部、左側、右側的值精確到0以將元素帶到所有視口。

例如：

 a { text-decoration: none; color: white; /*Let's Chat colour*/ } .Oval { position: relative; font-family: 'Open Sans', sans-serif; top: 510px; text-align: center; font-size: 25px; text-color: white; left: 30%; z-index: 75; background-color: orange; width: 140px; height: auto; background: #162129; border-radius: 40px; padding: 0px; text-decoration: none; } .Oval:hover { position: relative; } /* Original .Oval:hover:after { content: url(Lightning1.JPG); display: block; position: absolute; center: 100%; top: -510px; opacity: 0.5; z-index: -10; height: 100%; width: 100%; } */ .Oval:hover::after { content: url(https://i.imgur.com/QgfTfOU.jpg); display: block; position: fixed; opacity: 0.5; z-index: -10; top: 0; border: 0; left: 0; right: 0; }

 <div class="Oval"><a href="mailto:">Let's Chat</a></div>

---

---

1. 如果您只想在div.Oval上使用背景圖片，那么您應該使用 CSS 屬性position:absolute

 a { text-decoration: none; color: white; /*Let's Chat colour*/ } .Oval { position: relative; font-family: 'Open Sans', sans-serif; top: 510px; text-align: center; font-size: 25px; text-color: white; left: 30%; z-index: 75; background-color: orange; width: 140px; height: auto; background: #162129; border-radius: 40px; padding: 0px; text-decoration: none; clip-path: border-box; /* Added */ overflow: hidden; /* Added */ } /* Original .Oval:hover { position: relative; } */ /* Original .Oval:hover:after { content: url(Lightning1.JPG); display: block; position: absolute; center: 100%; top: -510px; opacity: 0.5; z-index: -10; height: 100%; width: 100%; } */ /* Added */ .Oval:hover::after { content: ''; background: url(https://i.imgur.com/QgfTfOU.jpg); background-size: auto; background-size: cover; display: block; position: absolute; opacity: 0.5; z-index: -10; top: 0; border: 0; left: 0; right: 0; bottom: 0; }

 <div class="Oval"><a href="mailto:">Let's Chat</a></div>

Answer 2

您需要添加pointer-events: none; + z-index: -1; .Oval:hover:after上的.Oval:hover:after類似下面的代碼片段。

我希望下面的片段會對你有很大幫助。

 a { text-decoration: none; color: white; } .Oval { position: relative; font-family: 'Open Sans', sans-serif; top: 100px; text-align: center; font-size: 25px; color: white; left: 50%; margin-left: -70px; background-color: orange; width: 140px; height: auto; background: #162129; border-radius: 40px; padding: 0px; text-decoration: none; } .Oval:hover:after { content:''; background: url(https://i.imgur.com/QgfTfOU.jpg); background-size: cover; display: block; position: fixed; top: 0; left: 0; z-index: -1; height: 100%; width: 100%; pointer-events: none; }

 <div class="Oval"><a href="mailto:">Let's Chat</a></div>

Answer 3

 a { text-decoration: none; color: white; /*Let's Chat colour*/ } .Oval { position: relative; font-family: 'Open Sans', sans-serif; top: 510px; text-align: center; font-size: 25px; text-color: white; left: 30%; z-index: 75; background-color: orange; width: 140px; height: auto; background: #162129; border-radius: 40px; padding: 0px; text-decoration: none; } .Oval:hover { position: inherit; left:0; } .Oval:hover a{display:none;} .Oval:hover:after { content:''; background: url(https://i.imgur.com/QgfTfOU.jpg); background-size:cover; display: block; position: absolute; center: 100%; top:0; left:0; opacity: 0.5; z-index: 1; height: 100%; width: 100%; }

 <div class="Oval"><a href="mailto:">Let's Chat</a></div>