Есть фоновое изображение с прозрачным цветом

Я хотел бы иметь фоновое изображение с прозрачным цветом, покрывающим изображение. Но когда я пытаюсь поставитьЕсть фоновое изображение с прозрачным цветом

background-image: url(mylocation); 
background-color: darkgray; 
opacity: 0.5;

внутри тела {} метки, изображение показывает, но не цвет, а все остальное является прозрачным. Я уверен, что все остальное прозрачно, потому что все они являются дочерней средой тела, но как я могу исправить это, так что это так, как мне бы хотелось?

Спасибо!

источник

2014-09-30 Vec10

Как тело вашего вопроса связаны с названием? Кажется, у них две разные вещи? –

Упс, это название от чего-то еще. – Vec10

Помогите ли любой из этих ответов? Или вы все еще застряли? –

Попробуйте это: дизайн

body{ 
    background:url('Image url'); 
    opacity:0.5; 
} 

#container{ 
    background:transparent: 
} 
//=====================contain all tags

HTML:

<body> 
<div id="container"> 
</div> 
</body>

источник

2014-09-30 04:09:45

Цвет фона запасной вариант, если изображение не может быть отображено, а не фон для изображения. Также имейте в виду, что opacity применяется ко всему содержимому элемента, а не только к фону.

Попробуйте

html { 
    background:url('Image url'); 
} 


body { 
    /*Use RGBA to get transparent color*/ 
    background-color:rgba(100,100,100,0.5); 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:0; 
}

Demo

Хотя это может быть лучшим вариантом:

body 
{ 
    background-image: url(http://placehold.it/200x200/ff0000/ffffff&text=BG+Image); 
} 


body:before 
{ 
    display:block; 
    opacity:0.5; 
    background-color:darkgrey; 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    content:""; 
    z-index:-1; 
}

Demo

источник

2014-09-30 04:20:13

Есть фоновое изображение с прозрачным цветом

ответ

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