0

我想知道是否可以完成以下操作。查看此示例http://jsfiddle.net/huhu/r7kSf/，是否只能以不透明度级别为目标？让我们说opacity:0.5;正常条件和悬停以完全不透明？我知道当使用颜色时使用 alpha 系数更容易，但是只有图像呢？选项可以是使用两个不同的图标吗？在悬停下加载它的替代版本？我认为这不是一个好主意，因为对于许多 http 请求，除非在 sprite 中。

谢谢

4

4 回答 4

2

是的，使用 CSS3 的rgba背景。例如，#F7F8BD用 50% opacity 变为rgba(247,248,189,0.5);注意兼容性还不是 100%，所以使用以下：

background: #F7F8BD; /* Browsers that don't support RGBa */
rgba(247,248,189,0.5); /* CSS3 */

有关详细信息，请参阅http://css-tricks.com/rgba-browser-support/。

于 2013-01-20T21:26:39.693 回答
1

代替

opacity:0.5

采用：

background-color:rgba(0,0,0,0.5);

其中前 3 个数字是红色、绿色和蓝色值，最后一个是 alpha 值，它为您的背景提供透明度

于 2013-01-20T21:28:49.590 回答
1

如果我理解这个问题，那么不 - 你不能对子弹图像应用不透明度，但不能对整个图像应用不透明度li。

您最好的选择是将图像作为背景放入span：

<li><span class="bg"></span> Text</li>

并将不透明度应用于span

于 2013-01-20T21:30:49.777 回答
1

这是可能的，但需要一些棘手的 CSS3 hacking - 基本上，使用伪元素在每个项目前面创建一个新的 inline-block 元素:before，然后调整这些元素的不透明度。此外，您不会将背景图像分配给<li>元素本身，而是将其分配给:before伪元素。

#mainFeatures li:before {
    content: '\0000a0';
    display: inline-block;
    opacity: 0.5;
    width: 30px;
}

#mainFeatures li#[insert element ID here]:before { 
    background:url([image url]) no-repeat 0 5px;
}

我已经修改并分叉了你的小提琴 - 看看:) http://jsfiddle.net/teddyrised/QBGWf/1/

于 2013-01-21T00:54:16.967 回答