Question

我想知道是否可以做到以下几点。查看此示例http://jsfiddle.net/huhu/r7kSf/，只能将左侧图标定位为不透明度级别？让我们说opacity:0.5;正常情况并且在悬停下有完全不透明度？我知道使用alpha系数时使用颜色更容易，但只有图像呢？该选项可以使用两个不同的图标？在悬停下加载它的备用版本？我不认为这是好主意，因为许多http请求除非在sprite中等等。

thx

Answer 1

是的，使用CSS3的rgba背景。例如，{0}不透明度的#F7F8BD变为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/。

Answer 2

而不是

opacity:0.5

使用：

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

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

Answer 3

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

您最好的选择是将图片作为背景添加到span：

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

将不透明度应用于span

Answer 4

这是可能的，但需要一些棘手的CSS3黑客攻击 - 基本上，使用: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/

我可以只定位背景不透明度而不是其他任何东西

4 个答案: