Прозрачная коробка CSS

-5

Для уточнения я фотоделал желаемый результат:Прозрачная коробка 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

Было бы полезно изображение того, что должно выглядеть (с текстом в нем). –

это действительно поможет, если вы можете сделать фотошоп для желаемого результата, потому что я не могу понять, чего вы пытаетесь достичь ... – Banana

Использование 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

+1 Это хорошая идея, поставьте полупрозрачный серый квадрат под текстом, чтобы он выглядел так, как если бы изображение было прозрачным. – Banana

Прозрачная коробка CSS

ответ

Смежные вопросы