是否有任何顺序覆盖背景图像的img标签图像?

时间:2016-10-26 23:15:28

标签: html css

它被插入背景图像到li类。

里面的li class img标签有。

li class标签上的背景图片,你如何占据顶部呢?

<style>
.wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 625px;
}
.ul-wrap {
    width: auto;
    position: relative;
}
li.full-image.guest_bulr {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQoU2NkIAJ4e3sbMxJSB1K0devWs3gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQBteCUf8jBb4wAAAABJRU5ErkJggg==);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 980px;
    height: 625px;
    z-index: 999;
    display: none;
    background-color: rgba(21, 18, 18, 0.9);
    zoom: 1;
    background-size: cover;
}

.wrap img {
    max-width: 100%;
    display: block;
}

</style>

<div class="wrap">
    <ul class="ul-wrap">
        <li>
            <img src="http://placehold.it/980x625/?text=image-1st" alt="image" class="first-img">
        </li>
    </ul>
</div>

1 个答案:

答案 0 :(得分:2)

使用var item = { ingredient: { skin: { badgerskin: { id: "badgerskin", name: "Badger Skin", etc: 30 } }, teeth: { badgerteeth: { id: "badgerteeth", name: "Badger Teeth", etc: 80 } } } } var enemy = { animal: { badger: { loot: [item.ingredient.skin.badgerskin, item.ingredient.teeth.badgerteeth], health: 50, etc: "lala" } } } 亲戚。 见工作示例。

&#13;
&#13;
.first-img
&#13;
.wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 625px;
}
.ul-wrap {
    width: auto;
    position: relative;
}

.ul-wrap li {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVQoU2NkIAJ4e3sbMxJSB1K0devWs3gVwhSBDMOpEFkRToXoirAqxKYIQyEuRSgK8SmCKySkCKyQGEUghQBteCUf8jBb4wAAAABJRU5ErkJggg==);
  display: block; 
  position: relative;
  width: 980px;
  height: 625px;
  background-size: cover;
  background-color: rgba(255, 0, 0, 0.4);
}

.wrap img {
    max-width: 100%;
}

.first-img {
  position: relative;
  z-index: -1;
}
&#13;
&#13;
&#13;