3

введите сюда описание изображения

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

<div class="block-kartinka">
    <!--*****************-->
    <div class="red-block">
        <div class="yellow-block">
        </div>
    </div>
</div>

3 ответа 3

4

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

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

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

Литература

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

3
  • 1
    Да, opacity тоже подходит, но дочерние элементы также становятся прозрачными
    – Arthur
    Commented 29 апр. 2018 в 9:41
  • 1
    Но как быть в моём случае? Если я делаю желтый блок полностью прозрачным, тогда полностью виден красный блок. А мне надо, чтобы ТОЛЬКО центр красного блока был прозрачным. Commented 29 апр. 2018 в 9:48
  • 1
    Блин, часто комментарий редактируете, я не успеваю читать изменения... Спасибо, гляну. Commented 29 апр. 2018 в 9:50
3

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

* {
  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;
}
<header>site</header>
<main>
  <div class="post">
    <p>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? </p>
  </div>

  <div class="post">
    <p>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? </p>
  </div>

  <div class="post">
    <p>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? </p>
  </div>

  <div class="post">
    <p>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? </p>
  </div>

  <div class="post">
    <p>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? </p>
  </div>

  <div class="post">
    <p>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? </p>
  </div>

</main>
<footer>footer</footer>

2

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

3
  • Тогда будет виден красный блок. Как тогда середину красного блока сделать прозрачной? Commented 29 апр. 2018 в 9:30
  • 1
    По логике, сделать также для красного блока Commented 29 апр. 2018 в 10:28
  • 1
    Если я так сделаю для красного блока, тогда будет видна картинка полностью, а мне надо так, чтобы был прозрачен полностью только центр красного блока. В общем должно получиться что-то типо такого prnt.sc/jbkg4t, НО тут я использовал картинку 2 раза: в хедере отобразил сверху, а в блоке ниже отобразил центр. Есть вариант задействовать картинку 1 раз? Commented 29 апр. 2018 в 12:22

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.