Как вставить картинку с помощью псевдоэлемента before?

  • Артур1 год назад
    Не могу вставить картинку с помощью свойства before, помогите кто знает

    Мой код:

    .services__help-bottom {
    background: #f4f4f4;
    padding: 40px 20px 40px 26px;
    position: relative;
    }

    .services__help-bottom::before {
    content: "../img/services_ball.png";
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #fff;
    font-family: FontAwesome;
    background: #23aae2;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    top: -30px;
    }
    Ответов: 1
  • Сергей1 год назад
    Свойство content позволяет вставлять содержание в текст страницы, которое первоначально в тексте отсутствует, применяется совместно с псевдоэлементами :after и :before, которые соответственно указывают на отображение после или до элемента, к которому добавляются.

    Артур, в вашем случае используйте свойство background-image, к примеру таким образом:

    <div class="content">text</div>


    .content {
    position: relative;
    padding: 40px;
    background-color: #ccc;
    }

    .content::before{
    position: absolute;
    content: "";
    background: url('image.gif') no-repeat right center;
    }


Ваш ответ:
  • bold
  • italic
  • underline
  • strike
  • Add link
  • Add image
  • Blockquote
  • Align left
  • Align center
  • Align right
  • Code
×
Используя сайт, вы подтверждаете, что вы прочитали и поняли политику о куки, политику конфиденциальности и наше пользовательское соглашение.