VasyOK{!}

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

Recommended Posts

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

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

пример.jpg

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

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

Share this post


Link to post
Share on other sites

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

<div>

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

</div>

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

Share this post


Link to post
Share on other sites

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

<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;
}

 

Share this post


Link to post
Share on other sites
2 часа назад, spdif сказал:

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

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

Share this post


Link to post
Share on other sites
52 минуты назад, VasyOK{!} сказал:

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

c53264897aaa.png

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

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

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

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

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

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

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

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

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

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

  Да 

download (1).png

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

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

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

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

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

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

...

Share this post


Link to post
Share on other sites
2 часа назад, spdif сказал:

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,331
    Total Members
    3,128
    Most Online
    god
    Newest Member
    god
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.