Question

由于某种原因，背景不会出现。

这是CSS

div.sidebar_beige {
background: no-repeat left top;
height: 142px;
margin: 35px 0 35px 0;
position: relative;}

div.sidebar_beige h3 {
    color: #f57f20;
    font-family: 'trebuchet ms';
    font-size: 17px;
    left: 15px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 15px;
    width: 163px;
}
div.sidebar_beige p {
color: #454343;
font-family: 'trebuchet ms';
font-size: 12px;
left: 15px;
margin: 0px;
padding: 0px;
position: absolute;
top: 42px;
width: 165px;}

div.sidebar_fcs {
 background-image: url('../images/sidebar_backup_online.png');
}
div.sidebar_lap {
 background-image: url('../images/sidebar_backup_laptoprepara.png');
}

这是使用的HTML：

<div class="sidebar_lap sidebar_beige">
            <h3>
              Laptop Reparatie
            </h3>
            <p>

              U kan niet gelijk een nieuwe<br />
            laptop kopen? <br />
            We zijn de goedkoopste<br />
            van Friesland.
            </p>
          </div>

Answer 1

如果可能，最好的方法是在body元素上为每个页面提供唯一或有用的类和/或ID。因此，仅举一个例子，一页是：

<body class="bg-custom">

而另一个是

<body class="bg-custom-right">

然后在你的CSS中你可以改变它：

.bg-custom #selector { background-img: url(...);}
.bg-custom-right #selector { background-img: url(...);}

其中#selector是您要在每个页面上更改的元素 - 但不必为每个页面分配它自己的新（复制）样式规则或类名称，从而使您的CSS和HTML更清晰而且更容易维护。（作为奖励，如果你需要使用相同的技巧进行每页编辑，你可以这样做。）

Answer 2

您可以在此处使用覆盖顺序：

make copied.css只包括：

div.sidebar_beige_lap {
  background: url('../images/sidebar_backup_laptoprepara.png') no-repeat left top;
}

在您的页面中，按顺序包含它们：

<link rel="stylesheet" href="original.css" />
<link rel="stylesheet" href="copied.css" />

copied.css中覆盖的所有属性都将获胜，否则original.css中的属性将被继承。

Answer 3

在div上使用两个类：

<div class="sidebar lap">...

将bg mage拉出侧边栏类，以便所有div可以共享它。为每个不同的bg设置一个新类（lpa，fcs等），其中只包含 bg图像。

Answer 4

使用多个CSS类分配：

HTML FCS：

<div class="sidebar_fcs sidebar_beige">...</div>

HTML LAP：

<div class="sidebar_lap sidebar_beige">...</div>

单个CSS：

div.sidebar_beige {
 background: no-repeat left top;
 height: 142px;
 margin: 35px 0 35px 0;
 position: relative;
}
div.sidebar_beige h3 {
 color: #f57f20;
 font-family: 'trebuchet ms';
 font-size: 17px;
 left: 15px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 top: 15px;
 width: 163px;
}
div.sidebar_beige p {
 color: #454343;
 font-family: 'trebuchet ms';
 font-size: 12px;
 left: 15px;
 margin: 0px;
 padding: 0px;
 position: absolute;
 top: 42px;
 width: 165px;
}
div.sidebar_fcs {
 background-image: url('../images/sidebar_backup_online.png');
}
div.sidebar_lap {
 background-image: url('../images/sidebar_backup_laptoprepara.png');
}

Answer 5

您的背景图片位于sidebar_lap班级。

在HTML中，您使用sidebar_beige_lap

将您的HTML更改为

<div class="sidebar_lap sidebar_beige">

我的背景没有出现

5 个答案: