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

2 ответа 2

7

В примере не видно разметки, поэтому сразу стоит оговорить, ::before и ::after есть только у парных тегов. У img, input и прочих они не будут работать.

content: "../img/services_ball.png"; — Ваша ошибка здесь. В content обычно записывается текст. И CSS не может узнать, что переданный текст вдруг оказался картинкой. Для этого ему нужно прямо указать об этом, через:

content: url('../img/services_ball.png');

Минусы такого варианта:

  1. Нельзя менять размеры картинки,
  2. В content можно было бы прописать дополнительный текст поверх картинки, но он уже занят картинкой.

background-image: url("my-img.png") — Поэтому, можно задать псевдоэлементу конкретные размеры и разместить картинку как фон:

.bubu {
  position: relative;
  /* Это важно, если псевдоэлемент нужно позиционировать относительно этого блока */
  
  width: 100px;
  height: 100px;
  background: orange;
}

.bubu::after {
  content: "";
  /* В любом случае необходим, даже пустой. Иначе не будет работать */
  
  position: absolute;
  left: 50px;
  top: 50px;

  width: 100px;
  height: 100px;

  background-image: url('https://i.imgur.com/MJekAr4.gif');

  background-size: 100px 100px;
  box-shadow: 1px 1px 5px #000;
}
<div class="bubu"> </div>

content: url("my-img.png")

.bubu {
  position: relative;

  width: 100px;
  height: 100px;
  background: orange;
}

.bubu::after {
  content: url('https://i.imgur.com/MJekAr4.gif');
  
  position: absolute;
  left: 50px;
  top: 50px;

  box-shadow: 1px 1px 5px #000;
}
<div class="bubu"> </div>

1
  • 1
    лучше помещать в content: url() т.к. в данном случае, картинкой можно управлять как блоком. background-image больше подходит для задания заднего фона
    – Roman Kh.
    2 окт 2018 в 16:41
1

Можно поместить ссылку на картинку в псевдоэлементе в content: url();

<div class="block"></div>
<style>
.block{
  display: block;
  width: 100px;
  height: 100px;
  background-color: blue;
}
.block::after{
    content: url(http://static.skaip.org/img/emoticons/180x180/f6fcff/penguin.gif);
    position: absolute;
    left: 80px;
  }
</style>

.block {
  display: block;
  width: 100px;
  height: 100px;
  background-color: blue;
}
.block::after {
  content: url(http://static.skaip.org/img/emoticons/180x180/f6fcff/penguin.gif);
  position: absolute;
  left: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="block"></div>
</body>
</html>

пример на codepen

Ваш ответ

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

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