Question

在我的标题div中，我想要使用不透明度.75，但是，我不想更改放置在div中的徽标的不透明度。每当我将不透明度赋予整个div时，它也会改变徽标的不透明度。在这方面有谁能帮助我？

Answer 1

试试这样：

div{
    background-color:rgba(0,0,0,.5);
}

Answer 2

你可以给每个div这样一个类：

<强> HTML

<div class="header">
    <div class="logo">Logo</div>
</div>

<强> CSS

.header {
    width: 100%
    height: 500px;
    background-color: rgba(0,0,0,.5);
}
.logo {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: #000;
    color: #fff;
}

您可以看到一个示例here。

Answer 3

只是添加到他的这里是另一个解决方案，将使用透明的png徽标

HTML：

<div class="wrapper">
    <img src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" />
</div>

CSS：

.wrapper {
    cursor:pointer;
    transition:all 400ms ease-in;
}

.wrapper:hover {
   background:powderBlue;
    transition:all 400ms ease-in;
}

.wrapper img {
    width:100%;
}

JSFIDDLE

或者您可以将悬停效果更改为rgba css

.wrapper:hover {
    background:rgba(0,0,0,0.75);
}

或使用1px png

.wrapper:hover {
   background:url("/path/to/transparent.png") repeat;
}

如何在不改变同一div中其他元素的不透明度的情况下改变div的不透明度？

3 个答案: