Могу ли я изменить высоту изображения в CSS: before /: after псевдоэлементов?

251

Предположим, я хочу украсить ссылки на определенные типы файлов с помощью изображения. Я мог бы объявить свои ссылки как

<a href='foo.pdf' class='pdflink'>A File!</a>

тогда CSS как

.pdflink:after { content: url('/images/pdf.png') }

Теперь это прекрасно работает, за исключением случаев, когда pdf.pngразмер моей ссылки не подходит.

Я бы хотел сказать браузеру масштабировать :afterизображение, но я не могу на всю жизнь найти правильный синтаксис. Или это как фоновые изображения, где изменение размера просто невозможно?

ETA: я склоняюсь к тому, чтобы либо а) изменить размер исходного изображения до «правильного» размера, на стороне сервера и / или б) изменить разметку, чтобы просто добавить встроенный тег IMG. Я пытался избежать обеих этих вещей, но они звучат так, как будто они будут более совместимы, чем пытаться делать вещи исключительно с помощью CSS. Кажется, ответ на мой первоначальный вопрос звучит так: « Иногда ты можешь это сделать».

Coderer
источник
1
Есть ли убедительная причина, по которой вы не используете теги 'img' с тегами 'a', обернутыми вокруг них? Это более типичный синтаксис для изображения, которое также является ссылкой. Я говорю это потому, что даже если вы заставите свой метод работать, вы можете сбить с толку других разработчиков. CSS также имеет сильную репутацию непостоянства между браузерами / версиями.
Служба
4
Я ценю проблему, просто я не обязательно контролирую генерацию разметки - в этом случае я могу только изменить стиль, а не изменить структуру.
Coderer
Продолжительное обсуждение списка W3C рассылки: lists.w3.org/Archives/Public/www-style/2011Nov/...
user123444555621

Ответы:

376

Регулировка background-sizeразрешена. Однако вам все равно нужно указать ширину и высоту блока.

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

См. Полную таблицу совместимости в MDN .

Ансель Сантоса
источник
3
Это здорово, за исключением того, что большинство наших клиентов используют IE 7 или 8 (извините, корпоративная чушь).
Coderer
14
Если это так, вы не должны использовать :afterвообще. Это не поддерживается ниже IE8.
Ансель Сантоса
24
Этот метод также требует настройки, width: 10px; height: 20px;чтобы увидеть изображение.
здесь
5
Отметим также, что это действительно работает, но только с определенным background-imageсвойством, простое backgroundне будет работать.
Грубер
4
(Для :before) мне тоже нужно было position: absoluteи left: -10px.
Хьюго
95

Обратите внимание, что :afterпсевдоэлемент представляет собой блок, который в свою очередь содержит сгенерированное изображение. Нет способа стилизовать изображение, но вы можете оформить рамку.

Следующее - только идея, и решение выше более практично.

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

Недостатки: вам нужно знать внутренние размеры изображения, и оно оставляет вам некоторые пробелы, от которых я не могу избавиться от банкомата.

user123444555621
источник
7
zoom: 0.5 тоже стоит рассмотреть.
Алекс
Мне нравится идея этого решения, но оно бросает позиционирование, особенно в сценарии со встроенными блоками. (IE 11)
Кристофер Дэвис
1
зум не очень хорошо поддерживается.
1
jsfiddle не меняет размер. Я использую последний Firefox. Я также попробовал последний пример jsfiddle в этом посте, используя zoom, и он тоже не работает.
Райан
1
Просто примечание: в моем случае мне пришлось приложить position: absoluteвсе transform: scale(0.5)усилия, чтобы приступить к работе. Я также должен был вставить position: relativeэлемент «родитель» (владелец :afterпсевдо) для здравомыслия. Кроме того, я должен был добавить translate(-16px, -16px)к своему преобразованию, чтобы правильно расположить значок 16x16. Преимущество position: absoluteтакже состоит в устранении проблемы пробелов.
Брэден Бест
34

Поскольку мой другой ответ был явно не совсем понятен, вот вторая попытка:

Есть два подхода к ответу на вопрос.

Практично (просто покажи мне эту чертову картинку!)

Забудьте о :afterпсевдо-селекторе и перейдите на что-то вроде

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

теоретический

Вопрос в том, можете ли вы стилизовать сгенерированный контент ? Ответ: нет, вы не можете. В списке рассылки W3C было продолжительное обсуждение этому вопросу , но решения пока нет.

Сгенерированный контент отображается в сгенерированном блоке, и вы можете стилизовать этот блок, но не контент как таковой . Разные браузеры показывают очень разное поведение

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

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

Firefox и т. е. не поддерживают первое и используют внутренние размеры для второго

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

(из http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )

Аналогично, браузеры показывают очень разные результаты на таких вещах, как http://jsfiddle.net/Nwupm/1/ , где генерируется более одного элемента. Имейте в виду, что CSS3 все еще находится на ранней стадии разработки, и эта проблема еще не решена.

user123444555621
источник
1
@TJ Каждый отдельный ответ заслуживает ответа (если он недостаточно очевиден), который получит различное количество голосов и будет рассматриваться / цитироваться / передаваться по-разному в зависимости от содержания ответа.
Тимо Хуовинен
13

Вы должны использовать фон вместо изображения.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}
Санти Нуньес
источник
6

diplay: block; не имеет никакого эффекта

Положение также работает очень странно по отношению к основам интерфейса, так что будьте осторожны

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}
Дмитрий Юрченко
источник
4

Вот еще одно (рабочее) решение: просто измените размер изображения до нужного вам размера :)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

вам нужно, чтобы pdf.png был 20px * 10px, чтобы это работало. 20px / 10px в css здесь для того, чтобы указать размер блока, чтобы элементы, которые идут после блока, не все перепутали с изображением

Не забудьте сохранить копию исходного изображения в оригинальном размере.

Томас
источник
Это шутки!
Доктор медицинских наук Ашик
3
.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}
Рави Сони
источник
2

Вы можете использовать zoomсобственность. Проверьте это jsfiddle

Пламен
источник
1
При проверке jsfiddle оба имеют одинаковый размер, а масштаб выделяется красным.
Райан
В Firefox 53 он не изменяется в данный момент. Надеюсь, это может быть реализовано в более поздней версии Firefox. Приятно знать, что он работает по крайней мере в Chrome. :-)
Райан
2

Вы можете изменить высоту или ширину элемента « До» или «После» следующим образом:

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}
Неша Зорич
источник
1

Я использовал эту ширину контроля размера шрифта

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}
Андре Хесус Сейджи Ниши
источник
1

В настоящее время с flexbox вы можете значительно упростить ваш код и настроить только 1 параметр по мере необходимости:

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

Теперь вы можете просто настроить ширину элемента, и высота будет автоматически регулироваться, увеличивать / уменьшать ширину, пока высота элемента не достигнет нужного вам числа.

rhysclay
источник
1
У меня не сработало, может быть, потому что изображение svg, может быть, потому что родительский объект является гибким контейнером.
Мигель Пинто
не на JPG либоurl(//placeimg.com/800/200/arch)
BananaAcid
0
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
uyghurbeg
источник