元素（背景图片）混浊，但没有边界的不透明度

我知道该怎么做border opacity，怎么办background image opacity，但我想有一个元素没有边界不透明度，其上底色，图像不透明度。我不想在图像编辑器中修改图像，所以我正在寻找由CSS设置的不透明度。可能？元素（背景图片）混浊，但没有边界的不透明度

在我的CSS下面我想修改“禁用”状态与锋利的不透明边界。请指点...利用

例子：this fiddle

按钮样式：

div.button, div.button:hover 
    { 
    background: none; 
    border: 2px solid #6C7B8B; 
    border-radius: 8px; 
    clear: none; 
    color: transparent; 
    cursor: pointer; 
    display: inline-block; 
    filter: alpha(opacity=100); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    float: none; 
    height: 24px; 
    margin-bottom: 0px; 
    margin-left: 3px; 
    margin-right: 0px; 
    margin-top: 7px; 
    opacity: 1; 
    -moz-opacity: 1; 
    outline: none; 
    overflow: hidden; 
    padding: none; 
    vertical-align: top; 
    width: 24px; 
    }

点击效果：

div.button:active 
    { 
    left: 1px; 
    position: relative; 
    top: 1px; 
    }

额外的样式为禁用状态：

div.disabled, div.disabled:hover 
    { 
    cursor: default; 
    filter: alpha(opacity=50); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    opacity: 0.50; 
    -moz-opacity: 0.50; 
    } 

    div.disabled:active 
    { 
    left: 0px; 
    position: relative; 
    top: 0px; 
    }

额外的样式状态ON：

div.on, div.on:hover 
    { 
    border: 2px solid #007FFF; 
    }

来源

2012-07-11 Ωmega

为了让您可以在边框的彩色部分使用RGBA（{值}）。边界不透明度。你也可以透明（在同一部分）使边框消失。 – ppsreejith 2012-07-11 23:44:40

为什么你想要不透明，而不是降低颜色？你有一个按钮，颜色：透明;背景：无;'，顺便说一句 - 你能向我们展示你的页面吗？ – Bergi 2012-07-11 23:45:37

为什么你使用div.button而不是真正的按钮，它甚至有一个禁用的属性？ – Bergi 2012-07-11 23:47:00

你只是在相同的情况下CSS: set background image with opacity? - 你希望有一个透明的背景，但不透明的内容（边框计数）。

所以在CSS3中没有任何这样的background-image-opacity，你只能建立一个透明的图像或两个元素相互位置，下方包含图像（如在那里的答案建议）。

但在你的情况下，这将足以遮蔽图像。例如，这可以通过从一开始就使用透明图像来完成，但是改变下层background-color。或者你会使用

<div class="button" title="Zoom!"><img src="icon.gif" alt="glasses" /></div>

与

div.button.disabled img { opacity: .5; }

，这使得更多的语义意义了。你应该远离那些内联样式。

（updated fiddle）

来源

2012-07-12 00:10:35 Bergi

谢谢，我做了我的测试:) http://jsfiddle.net/FJpBt/ – 2012-07-12 00:26:20

你可以通过放置在按钮的顶部半透明伪元素暗淡的背景图像，而不是边界：

enter image description here

div.button { 
    ... 
    position: relative; 
    } 

    div.disabled:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: 0; 
    background: rgba(255,255,255,0.7); 
    border-radius: 6px; 
    }

请注意，我建议这只是因为我喜欢挑战，我仍然认为Bergi的答案是这样做的“正确方式”。

http://jsfiddle.net/NECyg/

来源

2012-07-12 00:20:31 Duopixel

+1 ::非常好 - 非常感谢！ – 2012-07-12 00:27:36

我期望伪元素放置在按钮的顶部也禁用'onclick'按钮事件，我很喜欢，但由于某种原因它不（http://jsfiddle.net/2jNze/） - 那部分伪元素也可以用吗？请指教。 – 2012-07-12 14:38:25

伪元素不会阻塞事件，所以你必须做类似'$（element）.click（function（）{if {$（this）.hasClass（'。disabled'）{return false;} }}）' – Duopixel 2012-07-12 16:00:41

元素（背景图片）混浊，但没有边界的不透明度

回答

相关问题