есть картинка большая,как ее посавить фоном на весь body?
а как сделать такой прозрачный фон?если ставлю opacity 0.8 то и все элементы становятся полупрозрачными(текст,картинки)а мне надо чтобы только фон становился полупрозрачным?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуполупрозрачный фон
background: rgba(0,0,0,0.5);
/Изображение/
body{
background: url('ВАША КАРТИНКА') no-repeat center top;
background-size: cover;
}
/*полупрозрачный белый фон*/
.conteiner{
width: 1000px;
margin: 0 auto;
background: rgba(255,255,255,0.5);
}
Пример
* {
padding: 0;
margin: 0;
}
body {
background: url('https://lh3.googleusercontent.com/GaoBu5S1ct7Ge2-tFgDY-YcUHX3rKyVV_5j6DoxbrzFZZHnTIEreqigcXFDVW5y94j4=h900') no-repeat center top;
background-size: cover;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 30px 15px;
background: rgba(255, 255, 255, 0.5);
height: 100vh;
}
<div class="container"></div>
На CSS3:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
/* то что ниже – для устаревающих браузеров. Про IE отдельная тема */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Другие варианты и подробности на англ. на css-tricks.
Прозрачность фона вам доступна только через альфа-канал. Т.е. если это картинка, то это должен быть .png с прозрачностью. Если это цвет, то он должен быть задан через background: rgba( 255, 255, 255, 0.5); /*полупрозрачный белый*/
Если вы примените opacity
, то свойство унаследуется дочерними элементами и все они сделаются полупрозрачными, что вы и наблюдали.
Используйте img
тег и только его делайте прозрачным. Или просто div
отдельно засуньте в body
. opacity
наследуется.