只有在特定區域的不透明度

我想只爲左下角的div提供不透明度。這可能嗎？怎麼樣？只有在特定區域的不透明度

<div id="right_img"></div>

CSS

#right_img 
{ 
    float:right; 
    width:600px; 
    height:400px; 
    margin-top:100px; 
    background:url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center; 
    opacity:0.6; 
    filter:alpha(opacity=60); 
}

如果我給不透明度爲完整的DIV，圖像的清晰度會丟失。

來源

2012-07-31 Prashobh

我不認爲可以通過CSS將元素的特定區域賦予不透明度，除非您使用RGBA的CSS漸變。也許你有一個你想要完成的例子，比如模型？ – 2012-07-31 07:45:23

使用html5 canvas＆javascript來做這些有點東西。 – SVS 2012-07-31 07:54:34

讓元素不透明總是也影響整個元素及其所有子元素。如果你想給它的一個孩子不透明的屬性，你必須直接在該元素上聲明它。有時你必須引入一些輔助元素來達到你想要的效果。

異常是您聲明不透明的顏色不透明的子元素。使用新的rgba()聲明（第四個參數是顏色的不透明度），可以實現像「透明」div（透明背景）但字體完全不透明的效果。

在你的情況下，它可能就足夠了（你解釋的答案 - 這不是很清楚）只使用正常的背景聲明與此rgba背景色：

#right_img{ 
    background:rgba(x,y,z,0.6) url(../images/assets/sobrf-maria-page.jpg) no-repeat bottom center; 
}

與x,y,z = 0...255和a = 0...1

請注意，舊版IE（甚至IE8！）不支持rgba()聲明。你需要一個過濾器來支持這些。幸運的是一個：

filter:progid:DXImageTransform.Microsoft.gradient(
      startColorstr=#aaxxyyzz, 
      endColorstr =#aaxxyyzz);

其中所述第一參數（a）是與0% = 00和100% = FF的不透明度。和xx,yy,zz = 00...FF。

來源

2012-07-31 07:41:13 Christoph

改爲使用PNG圖像並使透明度成爲圖像的一部分？

來源

2012-07-31 07:49:48 Supr

只有在特定區域的不透明度

回答

相關問題