Question

我的html页面中有一个div，根据一些淘汰代码动态显示一些内容。这是它的定义方式：

<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}">
    <div class="cardPositioning panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title" data-bind="text: person.Name"></h3>
        </div>
        <header>
            <!--<img width="256" height="256" src="app/Images/horse.jpg">-->
            <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
        </header>
        <footer>
            <!-- $data.firstName-->
            <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p>
            <p class="nameEmployeePos" data-bind="text: person.Role"></p>
            <p class="nameEmployeePos" data-bind="text: person.Email"></p>
        </footer>
    </div>
</section>

在我的css文件中我有亲戚：

.background-image {
    background-image: url("../Images/blocks.png");
    width: 100%;
    z-index: 10;
    background-position-x: 1400px;
    background-position-y: 400px;
    background-repeat: no-repeat;
}

所以，我设法实现了blocks.png图像作为我想要的div的背景出现。我现在想要修改此图像的不透明度，但如果我在 .background-image 中应用了一些不透明度设置，则会影响整个div，而不仅影响图像。我怎样才能做到这一点？

Answer 1

我是如何使用我自己的网站创建一个新的div并将你的div放入其中。然后使用background-color更改div的背景颜色：rgba

这就是我做到的。但我不知道它是否适合你。

Answer 2

只需添加类似

的类

.opacity {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

然后你可以将这个类与你的background-image类一起使用

div的背景不透明度而不影响所有孩子

2 个答案: