Question

<style>
    .aboutmovie 
        {
            background-image: url("https://image.tmdb.org/t/p/w1000/rjUl3pd1LHVOVfG4IGcyA1cId5l.jpg");
	}
</style>

<div class="aboutmovie">	
    <h1>Helloo</h1>
</div>


<style>
    .aboutmovie 
        {
            background-image: url("https://image.tmdb.org/t/p/w1000/5pAGnkFYSsFJ99ZxDIYnhQbQFXs.jpg");
	}
</style>

<div class="aboutmovie">	
    <h1>Helloo</h1>
</div>

我正在使用PHP来执行此操作。所以，我不能为所有div等提供不同的风格。

此代码有什么问题？为什么背景图像不会改变？我猜这段代码是不言自明的。

Answer 1

不要使用两个style块，这些块不会以您想象的方式工作（即同一个类）。

您可以使用:nth-of-type(1)类上的.aboutmovie伪类，如下所示

＆＃13;

<style type="text/css">
  .aboutmovie:nth-of-type(1) {
    background-image: url("https://image.tmdb.org/t/p/w1000/rjUl3pd1LHVOVfG4IGcyA1cId5l.jpg");
  }
  
  .aboutmovie:nth-of-type(2) {
    background-image: url("https://image.tmdb.org/t/p/w1000/5pAGnkFYSsFJ99ZxDIYnhQbQFXs.jpg");
  }
</style>

<div class="aboutmovie">
  <h1>Helloo</h1>
</div>

<div class="aboutmovie">
  <h1>Helloo</h1>
</div>

＆＃13;

Answer 2

在您的样式中，您的第二个background-image属性会覆盖第一个属性，因为您在同一个类aboutmovie上指定它们。

您可以检查CSS级联（https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade）。

如果你想在第二个div上有另一个背景图像，你可以使用另一个类。

Answer 3

是的，你可以改变每个div的类，如果你使用PHP，它会更容易。

这样做：

由于您从MySQL获取结果，因此您的代码应该是这样的：

$aboutmovienumber = 0;

foreach ($xyz as $row)
{
$aboutmovienumber++;

echo'
<style>
.aboutmovie'.$aboouutmovienumber.' {
your CSS code here
}
</style>


<div class="aboutmovie'.$aboouutmovienumber.'">hello</div>';
}

Answer 4

一个文档中的所有CSS片段都会被一起解释，这意味着在构建和显示HTML页面之前，第二次设置.aboutmovie background-image将覆盖第一个。

与写作相同

<style>
.class {background-image: url('img_1.png')}
.class {background-image: url('img_2.png')}
</style>

Class将设置第一个背景，然后用第二个图像覆盖。

您需要找到一种使用内联CSS的方法，或使用不同的类或 id 名称。

喜欢这样

<style>
    #about1 {
        background-image: url("https://image.tmdb.org/t/p/w1000/rjUl3pd1LHVOVfG4IGcyA1cId5l.jpg");
    }
</style>

    <div id="about1">   
    <h1>Helloo</h1>
    </div>

<style>
    #about2 {
        background-image: url("https://image.tmdb.org/t/p/w1000/5pAGnkFYSsFJ99ZxDIYnhQbQFXs.jpg");
    }
</style>

    <div id="about2">   
    <h1>Helloo</h1>
    </div>

背景图像不会改变

4 个答案: