初學者在這里！
我正在為一項任務而苦苦掙扎。要求為三個不同頁面上的所有三個不同影像添加一個具有唯一名稱“div=heroimage”的 div ID。但是，它們在每個頁面上都位于相同的位置。
CSS 主頁，第二頁和第三頁
＃采取
{
height: 200px;
background-image: url(resort.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
＃酒店
{
height: 200px;
background-image: url(hotel.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#casa
{
height: 200px;
background-image: url(casa.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
另外兩個相同，只是ID名稱和標題不同。如果我用“div=heroimage”更改所有三個，最好的方法是什么？
uj5u.com熱心網友回復：
您可以創建一個類，它在一個. class..中包含所有相同的部分，然后是特定的影像，通過 unique # ids：
.heroimage{
height: 200px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#resort{
background-image: url(resort.jpg);
}
#hotel{
background-image: url(hotel.jpg);
}
#casa{
background-image: url(casa.jpg);
}
結果divs如下：
<div id="resort" class="heroimage">
<div id="hotel" class="heroimage">
<div id="casa" class="heroimage">
uj5u.com熱心網友回復：
編輯
您可以采用以下想法并將其擴展到嚴格的ids。
#resort,
#hotel,
#casa {
--backgroundImageUrl: url(resort.jpg);
height: 200px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: var(--backgroundImageUrl);
}
#hotel {
--backgroundImageUrl: url(hotel.jpg);
}
#casa {
--backgroundImageUrl: url(casa.jpg);
}
您可以添加多個類作為class屬性的值。
這個：
.heroImage.option1 { … }
火柴：
<div class="heroImage option1"></div>
我會class為每個版本創建一個共享的然后獨特的類。獨特的類覆寫了一個CSS 變數，它根據需要調整背景影像。
.heroImage {
--backgroundImageUrl: url(resort.jpg);
height: 200px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: var(--backgroundImageUrl);
}
.heroImage.hotel {
--backgroundImageUrl: url(hotel.jpg);
}
.heroImage.casa {
--backgroundImageUrl: url(casa.jpg);
}
度假村頁面（默認——不需要覆寫class）
<div class="heroImage"></div>
酒店頁面
<div class="heroImage hotel"></div>
Casa頁面
<div class="heroImage casa"></div>
uj5u.com熱心網友回復：
他們可能會測驗您對 CCS 變數的理解，例如：
background-color: var(--white);
或者它可能是關于繼承
p { color: green; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/354036.html