Предположим, я хочу украсить ссылки на определенные типы файлов с помощью изображения. Я мог бы объявить свои ссылки как
<a href='foo.pdf' class='pdflink'>A File!</a>
тогда CSS как
.pdflink:after { content: url('/images/pdf.png') }
Теперь это прекрасно работает, за исключением случаев, когда pdf.png
размер моей ссылки не подходит.
Я бы хотел сказать браузеру масштабировать :after
изображение, но я не могу на всю жизнь найти правильный синтаксис. Или это как фоновые изображения, где изменение размера просто невозможно?
ETA: я склоняюсь к тому, чтобы либо а) изменить размер исходного изображения до «правильного» размера, на стороне сервера и / или б) изменить разметку, чтобы просто добавить встроенный тег IMG. Я пытался избежать обеих этих вещей, но они звучат так, как будто они будут более совместимы, чем пытаться делать вещи исключительно с помощью CSS. Кажется, ответ на мой первоначальный вопрос звучит так: « Иногда ты можешь это сделать».
источник
Ответы:
Регулировка
background-size
разрешена. Однако вам все равно нужно указать ширину и высоту блока.См. Полную таблицу совместимости в MDN .
источник
:after
вообще. Это не поддерживается ниже IE8.width: 10px; height: 20px;
чтобы увидеть изображение.background-image
свойством, простоеbackground
не будет работать.:before
) мне тоже нужно былоposition: absolute
иleft: -10px
.Обратите внимание, что
:after
псевдоэлемент представляет собой блок, который в свою очередь содержит сгенерированное изображение. Нет способа стилизовать изображение, но вы можете оформить рамку.Следующее - только идея, и решение выше более практично.
http://jsfiddle.net/Nwupm/
Недостатки: вам нужно знать внутренние размеры изображения, и оно оставляет вам некоторые пробелы, от которых я не могу избавиться от банкомата.
источник
position: absolute
всеtransform: scale(0.5)
усилия, чтобы приступить к работе. Я также должен был вставитьposition: relative
элемент «родитель» (владелец:after
псевдо) для здравомыслия. Кроме того, я должен был добавитьtranslate(-16px, -16px)
к своему преобразованию, чтобы правильно расположить значок 16x16. Преимуществоposition: absolute
также состоит в устранении проблемы пробелов.Поскольку мой другой ответ был явно не совсем понятен, вот вторая попытка:
Есть два подхода к ответу на вопрос.
Практично (просто покажи мне эту чертову картинку!)
Забудьте о
:after
псевдо-селекторе и перейдите на что-то вродетеоретический
Вопрос в том, можете ли вы стилизовать сгенерированный контент ? Ответ: нет, вы не можете. В списке рассылки W3C было продолжительное обсуждение этому вопросу , но решения пока нет.
Сгенерированный контент отображается в сгенерированном блоке, и вы можете стилизовать этот блок, но не контент как таковой . Разные браузеры показывают очень разное поведение
(из http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html )
Аналогично, браузеры показывают очень разные результаты на таких вещах, как http://jsfiddle.net/Nwupm/1/ , где генерируется более одного элемента. Имейте в виду, что CSS3 все еще находится на ранней стадии разработки, и эта проблема еще не решена.
источник
Вы должны использовать фон вместо изображения.
источник
diplay: block;
не имеет никакого эффектаПоложение также работает очень странно по отношению к основам интерфейса, так что будьте осторожны
источник
Вот еще одно (рабочее) решение: просто измените размер изображения до нужного вам размера :)
вам нужно, чтобы pdf.png был 20px * 10px, чтобы это работало. 20px / 10px в css здесь для того, чтобы указать размер блока, чтобы элементы, которые идут после блока, не все перепутали с изображением
Не забудьте сохранить копию исходного изображения в оригинальном размере.
источник
источник
Вы можете использовать
zoom
собственность. Проверьте это jsfiddleисточник
Вы можете изменить высоту или ширину элемента « До» или «После» следующим образом:
источник
Я использовал эту ширину контроля размера шрифта
источник
В настоящее время с flexbox вы можете значительно упростить ваш код и настроить только 1 параметр по мере необходимости:
Теперь вы можете просто настроить ширину элемента, и высота будет автоматически регулироваться, увеличивать / уменьшать ширину, пока высота элемента не достигнет нужного вам числа.
источник
url(//placeimg.com/800/200/arch)
источник