html div 如何使用CSS為文本或圖像提供透明背景?




opacity 0 (22)

您可以使用漸變語法通過(ab)為Internet Explorer 8解決此問題。 ARGB的顏色格式。 如果您使用的是Sass預處理器,則可以使用內置函數“ie-hex-str()”轉換顏色。

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

是否有可能,僅使用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


如果你是一個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**
}

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

創建您想要半透明的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。


<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/


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

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

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


這是我能想到的最佳解決方案,而不是使用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>


有一個最小化標記的技巧:使用偽元素作為背景,您可以設置不透明度而不影響主元素及其子元素:

DEMO

輸出:

相關代碼:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

瀏覽器支持是Internet Explorer 8及更高版本。


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

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

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

span {
  color: white;
}

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

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


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



在Firefox 3和Safari 3中,您可以像GeorgSchölly一樣使用RGBA。

一個鮮為人知的技巧是您可以使用漸變過濾器在Internet Explorer中使用它。

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

第一個十六進制數字定義顏色的alpha值。

全面解決所有瀏覽器:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

這是來自CSS背景透明度,不影響子元素,通過RGBa和過濾器

截圖結果證明:

這是在使用以下代碼時:

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>


我通常用這個班來做我的工作。 這是相當不錯。

.transparent {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}


背景色: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月)


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

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

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


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

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

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

除此之外,

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


此方法允許您在背景中擁有圖像,而不僅僅是純色,並且可以用於在其他屬性(如邊框)上具有透明度。 不需要透明的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 (使用零或任何更適合您需要的值)。


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

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

否則就不可能。

編輯:

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



幾乎所有這些答案都假設設計師想要純色背景。 如果設計師真的想要一張照片作為背景,那麼目前唯一真正的解決方案就是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來執行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>





opacity