元素（背景圖片）混濁，但沒有邊界的不透明度

我知道該怎麼做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

元素（背景圖片）混濁，但沒有邊界的不透明度

回答

相關問題