为三个不同页面上的三个不同图像添加一个唯一的 div？答案

【问题标题】：Add a one unique div for three different images on three different pages?为三个不同页面上的三个不同图像添加一个唯一的 div？
【发布时间】：2021-11-09 11:55:04
【问题描述】：

这里是初学者！

我正在为一项任务而苦苦挣扎。要求为三个不同页面上的所有三个不同图像添加一个具有唯一名称“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”更改所有三个，那么最好的方法是什么？

【问题讨论】：

标签： html css image

【解决方案1】：

编辑

您可以采用以下想法并将其扩展到严格的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 variable，它会根据需要调整背景图像。

.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>

【讨论】：

谢谢。不幸的是，它需要一个 ID 而不是一个类。
@Soso 我已经为你更新了我的答案，严格使用ids。
非常感谢您的帮助！

【解决方案2】：

您可以在. class 中创建一个包含所有相同部分的类。然后通过唯一的# 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">

【讨论】：

非常感谢！
很高兴我能帮上忙 :)

【解决方案3】：

他们可能会测试您对 CCS 变量的理解，例如：

background-color: var(--white);

或者可能是关于继承

p { color: green; }

【讨论】：