透明胶盒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

回答

相关问题