Сделать блок посередине прозрачным

#html #css #вёрстка

Как сделать так, чтобы желтый блок стал прозрачным и была видна картинка сверху,
на которой написано "Сайт"??


    
    

        

        
    


    

Ответы

Ответ 1

Прозрачность блоков достигается несколькими способами:  


с помощью альфа канала любого цвета используя rgba() и hsla() (указывается четвертым
параметром цвета в диапазоне от 0 до 1);  
с помощью свойства opacity, так-же прозрачность указывается в диапазоне от 0 до 1;  
функция opacity() задаёт степень прозрачности изображений.   


Также изучите вариант с наложением изображения или фона один на другой.
Посмотрите вот тут, что и как. Я думаю вам это пригодится. 

Литература  

Справочник CSS / opacity
Единицы цвета в CSS
Функция opacity()


Ответ 2

Правда я представления не имею для чего это надо 



* {
  margin: 0;
  padding: 0;
}

body {
  padding-top: 150px;
  background-color: yellow;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  background: url(), rgba(100, 100, 100, 1);
  padding: 0 23%;
  color: #fff;
  line-height: 150px;
}

footer {
  background: url(), rgba(220, 180, 180, 1);
}

header,
footer {
  display: block;
  width: 100%;
  height: 150px;
  background-size: cover;
}

main {
  display: block;
  width: 100%;
  min-height: 500px;
  background-image: linear-gradient(90deg, red 0%, red 20%, rgba(255, 255, 255, .6)
20%, rgba(255, 255, 255, .6) 80%, red 80%, red 100%);
  position: relative;
}

.post {
  width: 50%;
  margin: 40px auto;
}

.post:first-child,
.post:last-child {
  margin: 0 auto;
}
site

  

    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores officiis
voluptatum vitae totam explicabo ratione ducimus perferendis eligendi eum quisquam
voluptate nulla, et consequuntur eius recusandae sunt minima sequi expedita debitis
corrupti
      aut incidunt. Nulla odit facere earum consequuntur unde? 
  

  

    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores officiis
voluptatum vitae totam explicabo ratione ducimus perferendis eligendi eum quisquam
voluptate nulla, et consequuntur eius recusandae sunt minima sequi expedita debitis
corrupti
      aut incidunt. Nulla odit facere earum consequuntur unde? 
  

  

    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores officiis
voluptatum vitae totam explicabo ratione ducimus perferendis eligendi eum quisquam
voluptate nulla, et consequuntur eius recusandae sunt minima sequi expedita debitis
corrupti
      aut incidunt. Nulla odit facere earum consequuntur unde? 
  

  

    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores officiis
voluptatum vitae totam explicabo ratione ducimus perferendis eligendi eum quisquam
voluptate nulla, et consequuntur eius recusandae sunt minima sequi expedita debitis
corrupti
      aut incidunt. Nulla odit facere earum consequuntur unde? 
  

  

    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores officiis
voluptatum vitae totam explicabo ratione ducimus perferendis eligendi eum quisquam
voluptate nulla, et consequuntur eius recusandae sunt minima sequi expedita debitis
corrupti
      aut incidunt. Nulla odit facere earum consequuntur unde? 
  

  

    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores officiis
voluptatum vitae totam explicabo ratione ducimus perferendis eligendi eum quisquam
voluptate nulla, et consequuntur eius recusandae sunt minima sequi expedita debitis
corrupti
      aut incidunt. Nulla odit facere earum consequuntur unde? 
  


footer


Ответ 3

rgba(0,0,0,0.5) - полупрозрачность данного блока