透明膠盒CSS

-5

爲了澄清我Photoshop處理所需的結果：透明膠盒CSS

enter image description here

我希望背景圖像覆蓋整個屏幕，文本將接近底部。

我想要一個透明的盒子，所以我可以把文本放在裏面。我在網上查了一下，但是我想要背景被固定和縮放以適應背景。另外我希望背景圖像的部分在框中顯示時是透明的，而不是框中的文字。這裏是我想出了迄今爲止代碼：

HTML：

<body> 
<div class="background"> // I don't know if its even needed to include this 
<div class="transbox"> 
      <p> Text here. 
      </p> 
      </div> 
    </div> 
    </body>

CSS：

background.div { 
    background: url(myimage.jpg) no-repeat center center fixed; 
    webkit-background-size: cover; 
    moz-background-size: cover; 
    o-background-size: cover; 
    background-size: cover; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',  sizingMethod=\'scale\'); 
    -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\ 
    background-repeat: no-repeat; 
    color: white; 
    font-family: Helvetica; 

    div.transbox { 
    background-color: #ffffff; 
    border: 1px solid black; 
    opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
} 
    div.transbox p { 
    position: fixed; 
    bottom: 0; 
    width:100%; 
    text-align: center; 
    font-size: 65px; 
    -webkit-text-stroke-width: 3px; 
    -webkit-text-stroke-color: black; 
    color: white; 
}

來源

2014-10-07 michael874

我不明白你的問題。你只是想要一個沒有背景的常規文本「框」？ – Matthias 2014-10-07 10:06:15

這應該是什麼樣子的圖像（包含文本）會很有用。 – 2014-10-07 10:07:08

它會真的幫助，如果你可以photoshop所需的結果圖片，因爲我似乎無法理解你想達到什麼... – Banana 2014-10-07 10:07:13

使用rgba

:root{ 
    background:#342c74 
} 

.transbox{ 
    text-align:center; 
    background-color: rgba(118, 126, 154, 0.5); 
    border:4px solid #1f1a46 
}

標記

<div class="transbox"> 
    <p> Text here.</p> 
</div>

DEMO

來源

2014-10-07 10:16:21

我只想要背景的特定部分來改變不透明度。文本的部分。 – michael874 2014-10-07 10:18:58

+1多數民衆贊成在一個不錯的主意，把一個半透明的灰色框下的文字，使其看起來像圖像是透明的.. – Banana 2014-10-07 10:25:07

回答

相關問題