Подскажите как закрасить баннер

[VasyOK{!}]

Приветствую специалистов по верстке.

Нарисовал мне дизайнер такой баннер

Подскажите как сверстать:

1) Строка "Размещение рекламы" по центру (по горизонтали)
2) фон этой строки закрашен только слева

[rzet777]

В div запихни картинку, как background, внутри этого div строка с размещением background с нужной прозрачностью и с нужным размером.

<div>

<div>Размещение рекламы</div>

</div>

Edited December 26, 2018 by rzet777
исправил неточность

[VasyOK{!}]

Хорошо, облегчу задачу. Как сделать так:

У меня получилось только так сделать:

https://jsfiddle.net/PlayboyZP/0xhr4bgn/

Edited December 29, 2018 by VasyOK{!}

[AlexZaw]

Как то так можно:

<div class="wrap">
  <div class="left"><span>Размещение рекламы</span></div>
  <div class="right"><span>1300 руб</span></div>
</div>

body{
  margin: 0;
}
.wrap{
  display: flex;
  justify-content: center;
  background: url(http://placekitten.com/1920/100) no-repeat center;
  height: 100px;
}
.left{
  display: flex;
  align-items: center;
  flex-grow: 1;
  text-align: right;
}
.left span{
 width: 100%;
 background: rgba(0,0,0,.5);
 padding: 10px 20px ;
 color: #fff;
}
.right{
  display: flex;
  flex-grow: 1;
  margin-left: -10px;
}
.right span{
  align-self: center;
  background: #0cc;
  padding: 10px;
  border-radius: 10px;
}

 

[spdif]

8 часов назад, VasyOK{!} сказал:

У меня получилось только так сделать:

https://jsfiddle.net/PlayboyZP/0xhr4bgn/ 

    Да 

    почти получилось - https://jsfiddle.net/spdif/ecanybgo/2/ 

[AlexZaw]

2 часа назад, spdif сказал:

почти получилось

Что значит "почти получилось"? Вам было предоставлено рабочее решение, что не так? Если есть какие-то дополнительные условия - озвучьте их.

[VasyOK{!}]

AlexZaw, ваш вариант - подходит

https://jsfiddle.net/PlayboyZP/rw9vcau0/

А как поступить если нет этой строчки (?):

<div class="right"><span>1300 руб</span></div>

[AlexZaw]

52 минуты назад, VasyOK{!} сказал:

А как поступить если нет этой строчки (?):

Добавить ее.  Ну или воспользоваться псевдоэлементом :before или :after

[VasyOK{!}]

"Добавить ее." :)) Имею ввиду, вариант, когда она не нужна. Просто "Размещение рекламы".

":before или :after" - да мне подсказали, как через псевдоэлементы. Так что уже знаю. А без них, как-то можно?

[spdif]

Во первых, с наступающим Вас! * НГ * с наилучшими пожеланиями ? ))

далее по списку: 

16 часов назад, AlexZaw сказал:

1. Что значит "почти получилось"?
2. Вам было предоставлено рабочее решение, что не так?
3. Если есть какие-то дополнительные условия - озвучьте их.

Человек VasyOK{!} писал: 

30.12.2018 в 02:36, VasyOK{!} сказал:

Как сделать так:

У меня получилось только так сделать:

https://jsfiddle.net/PlayboyZP/0xhr4bgn/

Он предоставил визуальный пример того что ему требуется, 

    и дал линк на тот результат который получился у него в песочнице. 

        а получилось у него так: 

30.12.2018 в 02:36, VasyOK{!} сказал:

    НО, результат то! не совсем тот получился. 

        далее я ответил тому (!внимание) кто задавал вопрос.?. 

            написав что мол 

19 часов назад, spdif сказал:

  Да 



    почти получилось - https://jsfiddle.net/spdif/ecanybgo/2/ 

    и вернул линк на его пример, 

        изменив в стилях значения в трех атрибутах 

        и более ни чего!!)

            А вот про рабочее решение которое якобы мне было предоставлено, 

                первый раз слышу...             Вы о чем это?!!...              Я не в курсе просто))

...

[AlexZaw]

2 часа назад, spdif сказал:

А вот про рабочее решение которое якобы мне было предоставлено

Пардон, не обратил внимания на имя автора ответа :) Вас тоже с наступающим!

[VasyOK{!}]

С этим вопросом разобрался. Спасибо за внимание!