Псевдоэлементное фоновое изображение не отображается

Question

У меня есть элемент div с треугольной рамкой, и я пытаюсь разместить изображение над ним, используя псевдоэлемент ::after с background-image. Однако метод не работает. Однако, если я пытаюсь установить content: "asd";, текст появится правильно. В принципе, я просто хочу иметь изображение дома над этим треугольником.

Вот HTML код:

<div id = "estatecorner" class = "house"></div> 

И вот CSS:

#estatecorner { 
    position: absolute; 
    right: 0px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 0 80px 80px 0; 
    border-color: transparent #67b2e4 transparent transparent; 
} 

#estatecorner.house::after { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: url(images/mini/house.png); 
    content: " "; 
} 

Вот jsFiddle

Answer 1

Существовали две вещи, чтобы принять к сведению здесь:

1. Как упоминалось в комментариях веб-тики, width и height псевдоэлемента были установлены в 100%, а родительский элемент имел размеры 0px x 0px (поскольку треугольник был сформирован с помощью пограничного хака). Из-за этого фактические расчетные размеры ребенка (псевдоэлемент) также были равны 0px x 0px, и, следовательно, изображение не показывалось. Содержимое отображалось, когда вы добавляли простой текст, потому что текст обычно переполняется. Решение этой проблемы: назначить явную высоту & ширина для дочернего псевдоэлемента (при присвоении высоты & ширина родительской линии испортит границу).

2. Когда background-image присваивается псевдоэлементу, а размер изображения мал по сравнению с контейнером (псевдоэлементом), фоновое изображение повторяется столько раз, сколько возможно, чтобы соответствовать элементу контейнера. Этого следует избегать, установив background-repeat: no-repeat; и для размещения изображения в треугольнике мы должны использовать свойство background-position с соответствующими значениями позиции в пикселях или процентах в зависимости от потребностей.

Ниже конечный фрагмент (со значениями выборок для высоты, ширины & положение):

#estatecorner { 
 
    position: absolute; 
 
    right: 0px; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 80px 80px 0; 
 
    border-color: transparent #67b2e4 transparent transparent; 
 
} 
 
#estatecorner.house::after { 
 
    position: absolute; 
 
    content: ""; 
 
    width: 80px; 
 
    height: 80px; 
 
    background: url("http://i.imgur.com/nceI30v.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: 75% 40%; 
 
}

<div id="estatecorner" class="house"></div>

---

Ниже показан альтернативный подход с использованием повернутый псевдо -element (CSS3 transforms) вместо хакера для достижения формы треугольника.

#estatecorner { 
 
    position: absolute; 
 
    width: 80px; 
 
    height: 80px; 
 
    right: 0px; 
 
    overflow: hidden; 
 
} 
 
#estatecorner:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: -80px; 
 
    right: -80px; 
 
    height: 138.4px; 
 
    width: 138.4px; /* (80 * 1.732px) */ 
 
    background: #67b2e4; 
 
    transform: rotate(45deg); 
 
    z-index: -1; 
 
} 
 
#estatecorner.house { 
 
    background-image: url("http://i.imgur.com/nceI30v.png"); 
 
    background-repeat: no-repeat; 
 
    background-position: 75% 35%; 
 
}

<div id="estatecorner" class="house"></div>

Answer 2

Пожалуйста, попробуйте это;

#estatecorner.house::after { 
     content: url('../img/yourimage.jpg'); 
     position: absolute; 
     left:0px; 
     width: 100%; 
     height: 100%; 
    } 

Answer 3

Вы должны указать высоту и ширину элементов psuedo в px, а не в% для этого случая.

#estatecorner.house::after { 
    position: absolute; 
    width: 14px; 
    height: 13px; 
    background: url(http://i.imgur.com/nceI30v.png) no-repeat; 
    content: " "; 
    left: 50px; 
    top: 20px; 
} 

Причина в том, что#estatecorner имеют размеры 0 X 0. Так что, если вы даете 100% высота и ширина С к его псевдопользователей элементы, то их размеры будут в конечном счете 0 х 0 тоже что было бы бесполезно.