: before и: после нескольких граничных / фоновых трюков на изображениях? - PullRequest
Новая
       19

: before и: после нескольких граничных / фоновых трюков на изображениях?

4 голосов
/ 28 августа 2010

Я использовал трюк CSS: before или: after (объясненный в этой статье: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/) для достижения нескольких границ и фона. Он отлично работает на div элементах, но я заметил, что это не такработать с изображениями вообще.

Вот мой код: 

.author img {
    position: absolute;
    left: 10px;
    background-color: #fff;
    padding: 3px;
    border: 1px solid #d0d0d0;
    width: 48px;
}

.author img:before {
    content: '';
    display: block;
    width: 80px;
    height: 16px;
    position: absolute;
    top: -17px; left: 0;
    background: red;
}

Есть ли способ использовать этот трюк на изображениях или мне придется обернуть мои изображения в дополнительный div?

Ответы [ 2 ]

7 голосов
/ 30 мая 2012

Вы должны обернуть img, потому что img не может содержать псевдоэлемент. Когда :before и :after используются в CSS, концептуально генерируется этот тип структуры (скажем, с div; обратите внимание, это просто для иллюстрации того, что делается, фактические HTML-элементы не являются создано): 

<div><pseudo-element:before />Actual div content<pseudo-element:after /></div>

Псевдоэлементы размещены внутри элемента. Но теги img (и теги input и другие подобные неконтейнеры, не имеющие конечных тегов) не имеют места для «содержимого», в том числе сгенерированного содержимого из псевдоэлементов.

1 голос
/ 28 августа 2010

Это прекрасно работает в DIV, но IMG не будет работать, потому что он перекрывает область, где применяются внутренние границы. К счастью, есть очень простой способ обойти это: содержать IMG внутри DIV. 

<div><img src="pic.jpg" alt="1" height="200" width="200" /></div>

И применить стили: 

img {border: 2px solid red;}
div {border: 3px solid black; width:204px; height:204px;}

Хотя вам не нужно явно устанавливать высоту / ширину img в вашем HTML, вам все равно нужно знать, что они из себя представляют, поскольку высоту / ширину DIV вычисляют следующим образом: div h = img h + img borderx2; div w = img w + img borderx2

...