第一個問題在這里：
我對 css 有點掙扎（沒有那么多經驗）。
所以基本上我得到了一張地圖的背景圖片（谷歌地圖截圖）。它是一個 .jpg 檔案，大小為 1623px x 765px（是的，很奇怪的像素尺寸）。
然后我所做的是創建一個包含四個矩形的網格。網格背景是地圖影像。
我現在想要做的是，當我將滑鼠懸停在這些網格矩形中的每一個上時，一個單獨的透明 .png（與地圖影像具有相同的大小，其中也有一些元素，例如每個矩形的路徑）應該顯示平滑過渡到不透明度 = 1。
我的問題是，無論我最終嘗試什么，我最終都會讓 .pngs 只顯示在它們各自的網格矩形中。
所以我不太確定如何“重疊”網格并使它們在全屏上可見。而且我真的不知道如何將所有“隱藏的”.png 放在彼此的頂部和背景影像的頂部。
這個代碼是我的起點。從那時起，我有幾種方法，例如 html 地圖。但是地圖不好，因為像素是固定大小。
還有另一種方法有 4 個不同的 bg-classes (bg1,..,bg4)，然后我想這樣做：
.bg1 {
opacity: 0;
background-image: url(../images/route_1.png);
}
...
#route-area1:hover .bg1 {
opacity = 1;
}
...
但背景從未顯示。z-index 也沒有幫助。
所以現在我只是回到了這個起點，因為事情變得一團糟。
CSS
.route-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 5px;
background: url('../images/route_map.jpg');
background-size: cover;
}
.route-container > div {
height: 382px;
}
.route-area {
display: block;
height: 765px;
opacity: 0;
}
#route-area1 {
background-color: tomato;
background-image: url(../images/route_1.png);
}
#route-area2 {
background-color: royalblue;
background-image: url(../images/route_2.png);
}
#route-area3 {
background-color: gold;
background-image: url(../images/route_3.png);
}
#route-area4 {
background-color: silver;
background-image: url(../images/route_4.png);
}
#route-area1:hover,
#route-area2:hover,
#route-area3:hover,
#route-area4:hover {
opacity: 0.5;
}
HTML
<div class="route-container">
<div id="route-area1" class="route-area">Child 1</div>
<div id="route-area2" class="route-area">Child 2</div>
<div id="route-area3" class="route-area">Child 3</div>
<div id="route-area4" class="route-area">Child 4</div>
</div>
uj5u.com熱心網友回復：
正如我提到的，背景影像將只適合它作為背景的元素的邊界。
在您的情況下，最好的選擇是以其他方式更改背景，我可以想到幾種方法：
- 在 div 之后添加一個偽元素，位置絕對或固定在一切后面。您可以找到一些 z-index 問題，但它是可行的。（僅限 CSS）
- 您可以在包含要更改的背景的父級末尾創建一個 div（僅限 css）
- 如果你需要點擊，你可以使用 :target 偽選擇器
- 用JS改變背景
更容易的應該是2。您甚至可以為每個影像設定 1 個，這有一些優點：如果您使用標簽，它會在嘗試顯示之前下載影像，因此當它進入時會立即生效。但這意味著整個頁面的加載時間更長。如果你讓它作為背景影像，它會在需要時加載，這可能需要幾毫秒（檢查上面的例子）
.route-container {
display: grid;/* ? */
grid-template-columns: repeat(2, 1fr); /* ? */
grid-template-rows: repeat(2, 1fr); /* ? */
grid-gap: 5px; /* ? */
background: url('https://desenio.pt/bilder/artiklar/zoom/8450_2.jpg?imgwidth=435&qt=');
background-size: cover;
width: 400px;
height:400px;
position:relative;
}
.route-area {
height: 200px;
display: block;
width: 200px;
opacity: 0;
transition:all .2s ease;
position:relative;
z-index:2;
}
#route-area1 {
background-color: tomato;
background-image: url(../images/route_1.png);
}
#route-area2 {
background-color: royalblue;
background-image: url(../images/route_2.png);
}
#route-area3 {
background-color: gold;
background-image: url(../images/route_3.png);
}
#route-area4 {
background-color: silver;
background-image: url(../images/route_4.png);
}
#route-area1:hover,
#route-area2:hover,
#route-area3:hover,
#route-area4:hover {
opacity: 0.5;
}
#bgimage{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:silver;
opacity:0;
transition:all .5s ease;
z-index:1;
background-position:center;
background-size:cover;
}
.route-area:hover ~ #bgimage{
opacity:1;
}
#route-area1:hover ~ #bgimage{
background-image:url('https://cdn.mos.cms.futurecdn.net/VSy6kJDNq2pSXsCzb6cvYF-1200-80.jpg');
}
#route-area2:hover ~ #bgimage{
background-image:url('https://static.independent.co.uk/2021/06/16/08/newFile-4.jpg?width=982&height=726&auto=webp&quality=75');
}
#route-area3:hover ~ #bgimage{
background-image:url('https://i.natgeofe.com/n/3861de2a-04e6-45fd-aec8-02e7809f9d4e/02-cat-training-NationalGeographic_1484324.jpg');
}
#route-area4:hover ~ #bgimage{
background-image:url('https://icatcare.org/app/uploads/2018/06/Layer-1704-1200x630.jpg');
}<div class="route-container">
<div id="route-area1" class="route-area">Child 1</div>
<div id="route-area2" class="route-area">Child 2</div>
<div id="route-area3" class="route-area">Child 3</div>
<div id="route-area4" class="route-area">Child 4</div>
<div id="bgimage"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337342.html