-1

In my page i have many table cells.
Inside each cell i have one box (i'm using a spoiler code to show or hide contents inside).
The box is described by a CSS.
The boxes are identical in looks, but I want to customize the properties of each as changing the color or background image
I paste CSS several times equivalent to the number of boxes.
I paste css style before each boxes code.
I try to change the background image of each box (default the color is white) but when i try to change one of these backgrounds, i obtain the same background of ALL boxes.
But it isn't what I want.

I have severals pictures in folder but it seems like I can not have different background pictures for different boxes..
This is the css style I use.:

<style type='text/css'>
            div.myautoscroll {
            height: 80ex;
            width: auto;
            background: white;
            background-image: url(cieloprato.jpg);
            overflow: hidden;
            border: 1px solid #444;
            margin: 1em;
        }
        div.myautoscroll:hover {
            overflow: auto;
        }
        div.myautoscroll p {
            padding-right: 16px;
        }
        div.myautoscroll:hover p {
            padding-right: 0px;
        }


  </style>

The background image for 1st box is cieloprato.jpg. But i want insert different image for box2 like bastman.png, for box3 spiderman.gif.
How Can I change background image or CSS style for every box?
Forgive my ignorance

4

2 回答 2

1

我认为有3种方式：

首先。您可以使用nth-*css 属性，但它不适用于旧浏览器。

.myautoscroll:nth-of-type(2) { 
  background: #3e3;
}

此代码使用此类更改 3 div 中的背景颜色。

其次。您可以为每个div元素添加唯一的identifierorclass，并通过 css 中的选择器获取它。

<div class="myautoscroll" id="mas1">...</div>
<div class="myautoscroll" id="mas2">...</div>

#mas1 {
  ...
}

#mas2 {
  ...
}

第三。您可以在每个div元素style属性中添加指向所需背景的位置。

<div class="myautoscroll" style="background: #0f3">...</div>
<div class="myautoscroll" style="background: #1f3">...</div>

第四。您可以在 JavaScript 中循环执行此操作（这只是示例）：

var elements = document.getElementByClassName('myautoscroll');

for (var i in elements) {
  var el = elements[i];
  el.style.background = '#' + (i % 10) + 'f3';
}
于 2012-07-30T03:42:43.603 回答
1

你为什么不给 td 上课？

.box1{background:url(cieloprato.jpg};
.box2{background:url(batman.png)};

并像这样把它放在html中

<td class = "box1"></td>
<td class = "box2"></td>
于 2012-07-30T04:05:50.573 回答