計算重疊RGBA值

例如：http://jsfiddle.net/CPK7L/2/計算重疊RGBA值

.example { 

    display: inline-block; 
    padding: 50px; 
    background: rgba(0, 0, 0, 0.5); 
    border: 25px solid rgba(0, 0, 0, 0.5); 
    margin-right: -30px; 
} 

.example2 { 

    display: inline-block; 
    padding: 50px; 
    background: rgba(0, 0, 0, 0.3); 
    border: 25px solid rgba(0, 0, 0, 0.3); 
}

正如你所看到的，第一個元素的右邊界被重疊的第二個元素的左邊框。發生這種情況時，它們的rgba值會使右邊框顯得更暗。

如何計算右邊界所需的alpha值（如果我希望該邊框在與第二個元素的左邊界重疊時顯示其「原始」顏色？

來源

2013-06-04 Sunny

爲什麼不爲第二個邊框添加border-left：none，所以沒有邊框重疊？這樣你就不會出現三角形。 –

我剛剛把它作爲一個例子。我不是真的在尋找一個css解決方案。我感興趣的是計算rgba將使邊界呈現爲原始顏色的算術（不考慮在該過程中創建的任何三角形）。 – Sunny

好的，你是否包含半透明的背景故意？內嵌塊元素上的盒子模型意味着您的背景和每個項目的邊界已經成倍增加 - 這是故意的問題還是錯誤？如果一個錯誤，你只是問如何獲得2個半透明物體覆蓋達到0.5不透明度，其中第二個是0.3不透明度（所以X + 0.3 = 0.5），你需要使用0.28。 0.29表示0.71燈正在通過。你的第二個項目設置爲0.3不透明度，通過其餘71％光線的70％。 71中的70％接近50，你會得到。

如果你需要包含背景，你會做類似的事情項目1：背景50％+邊框50％= 75％不透明度。第2項：背景30％+邊框30％= 51％不透明度。要求item1上的border-right對所有4種顏色= 50％（div1 bg）+ X（div1 border-right）+ 51％（div2背景和邊框）獲得75％的不透明度。這裏的問題是[50％+ X + 51％]等於[50％+ 50％] X必須是負數，這是你不能擁有的。

來源

2013-06-04 02:11:08

計算重疊RGBA值

回答

相關問題