html - div - opacity 0




如何使用CSS為文本或圖像提供透明背景? (18)

您可以使用css來執行rgba color code如下面給出的示例。

.imgbox img{
  height:100px;
  width:200px;
  position:relative;
}
.overlay{
  background:rgba(74, 19, 61, 0.4);
  color:#fff;
  text-shadow:0px 2px 5px #000079;
  height:100px;
  width:300px;
  position:absolute;
  top:10%;
  left:25%;
  padding:25px;
}
<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

是否有可能,僅使用CSS,使元素的background半透明,但元素的內容(文本和圖像)是不透明的?

我想在不將文本和背景作為兩個單獨元素的情況下實現此目的。

嘗試時:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

看起來兒童元素受父母的不透明度影響,因此opacity:1相對於opacity:0.6父母的opacity:0.6


CSS3可以輕鬆解決您的問題。 使用:

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

這裡,rgba代表紅色,綠色,藍色和alpha值。 由於255獲得綠色值,並且通過0.5α值獲得半透明度。


最好使用半透明的.png

只需打開Photoshop ,創建一個2x2像素圖像( 選擇1x1可能會導致Internet Explorer錯誤! ),用綠色填充它並將“圖層選項卡”中的不透明度設置為60%。 然後保存並使其成為背景圖像:

<p style="background: url(green.png);">any text</p>

當然,它很酷,除了可愛的Internet Explorer 6 。 有更好的修復可用,但這是一個快速的黑客:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

背景色:RGBA(255,0,0,0.5); 如上所述是最簡單的答案。 要說使用CSS3,即使在2013年,也不簡單,因為各種瀏覽器的支持程度隨著每次迭代而變化。

雖然所有主流瀏覽器都支持background-color (不是CSS3的新手)[1]但是alpha透明度可能很棘手,特別是對於版本9之前的Internet Explorer以及版本5.1之前的Safari上的邊框顏色。 [2]

使用CompassSASS類的東西可以真正幫助生產和跨平台兼容。

[1] W3Schools:CSS背景色屬性

[2] Norman博客:瀏覽器支持清單CSS3(2012年10月)


前段時間,我在使用CSS的跨瀏覽器背景透明度中寫了這個。

奇怪的Internet Explorer 6將允許您使背景透明,並使文本在頂部完全不透明。 對於其他瀏覽器,我建議使用透明的PNG文件。


問題是,文本實際上在您的示例中完全不透明。 它在p標籤內部具有完全不透明性,但p標籤只是半透明的。

您可以添加半透明的PNG背景圖像,而不是在CSS中實現它,或者將文本和div分成2個元素並在框上移動文本(例如,負邊距)。

否則就不可能。

編輯:

就像Chris提到的那樣:如果你使用具有透明度的PNG文件,你必須使用JavaScript解決方法使其在討厭的Internet Explorer中工作...


如果你是一個Photoshop人,你也可以使用:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

要么:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

如果您使用Less ,則可以使用fade(color, 30%)


幾乎所有這些答案都假設設計師想要純色背景。 如果設計師真的想要一張照片作為背景,那麼目前唯一真正的解決方案就是JavaScript,就像其他地方提到的jQuery Transify插件一樣

我們需要做的是加入CSS工作組討論並讓它們給我們一個background-opacity屬性! 它應該與多背景功能攜手合作。


您可以使用不透明度的RGB顏色,如RGB(63,245,0)中的此顏色代碼,並添加不透明度(63,245,0,0.5),並添加RGBA替換RGB。 用於不透明度

div{
  background:rgba(63,245,0,0.5);
  }


您可以使用純CSS 3rgba(red, green, blue, alpha) ,其中alpha是您想要的透明度級別。 不需要JavaScript或jQuery。

這是一個例子:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

您可以在CSS中使用RGBA (red, green, blue, alpha) ,如下所示:

所以,簡單地做這樣的事情就可以適用於你的情況:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}

最簡單的方法是使用半透明背景PNG圖像

如果需要,您可以使用JavaScript使其在Internet Explorer 6工作。

我使用Internet Explorer 6透明PNG中概述的方法。

除此之外,

你可以使用two side-by-side sibling elements來偽造它 - 使一個半透明 ,然後absolutely position the other over the top


有一個更簡單的解決方案,可以在同一個div上的圖像上疊加。 這不是正確使用這個工具。 但就像使用CSS製作疊加層的魅力一樣。

使用這樣的插入陰影:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

就這樣 :)


此方法允許您在背景中擁有圖像,而不僅僅是純色,並且可以用於在其他屬性(如邊框)上具有透明度。 不需要透明的PNG圖像。

在CSS中使用:before (或:after )並為它們提供不透明度值,使元素保持原始不透明度。 因此,您可以使用:before之前製作一個虛假元素並為其提供所需的透明背景(或邊框),並將其移動到您希望使用z-index保持不透明的內容之後。

一個例子( fiddle )(請注意,帶有dadDIV只是為了提供一些上下文和顏色的對比,實際上不需要這個額外的元素,並且紅色矩形向下移動一點向右移動以使其可見fancyBg元素背後的背景):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

用這個CSS:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

在這種情況下.fancyBg:before您想要具有透明度的CSS屬性(在此示例中為紅色背景,但可以是圖像或邊框)。 它被定位為絕對移動它.fancyBg (使用零或任何更適合您需要的值)。


為了使元素的背景半透明但是元素的內容(文本和圖像)不透明。 您需要為該圖像編寫css代碼,並且必須添加一個名為opacity且具有最小值的屬性。 例如

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

//值越小透明度越高,值越小透明度越低。


這是我如何做到這一點(它可能不是最佳的,但它的工作原理):

創建您想要半透明的div 。 給它一個類/ id。 保持EMPTY,然後關閉它。 給它一個設定的高度和寬度(比如300像素乘300像素)。 給它一個0.5的不透明度或任何你喜歡的顏色和背景顏色。

然後,直接在該div下面,創建另一個具有不同類/ id的div。 在其中創建一個段落,您可以在其中放置文本。 給div位置:relative和top: -295px (那是NEGATIVE 295像素)。 給它一個2的z-index以獲得良好的度量,並確保其不透明度為1.根據您的喜好設置您的段落樣式,但要確保尺寸小於第一個div的尺寸,這樣它就不會溢出。

而已。 這是代碼:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

這適用於Safari 2.x,我不了解Internet Explorer。


這是我能想到的最佳解決方案,而不是使用CSS 3.就我所見,它在Firefox,Chrome和Internet Explorer上運行良好。

將容器DIV和兩個子DIV放在同一級別,一個用於內容,一個用於背景。 並使用CSS,自動調整背景大小以適應內容,並使用z-index將背景實際放在後面。

    .container {
      position: relative;
    }
    .content {
      position: relative;
      color: White;
      z-index: 5;
    }
    .background {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: Black;
      z-index: 1;
      /* These three lines are for transparency in all browsers. */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      opacity: .5;
    }
<div class="container">
  <div class="content">
    Here is the content.
    <br />Background should grow to fit.
  </div>
  <div class="background"></div>
</div>





opacity