Могу ли я изменить высоту изображения в CSS:before/:after псевдоэлементов?
Предположим, я хочу украсить ссылки на определенные типы файлов с помощью изображения. Я мог бы объявить свои ссылки как
<a href='foo.pdf' class='pdflink'>A File!</a>
тогда CSS как
.pdflink:after { content: url('/images/pdf.png') }
Теперь, это прекрасно работает, если только pdf.png не подходит размер для моей ссылки.
Я хотел бы быть в состоянии сказать браузеру масштабировать :after изображение, но я не могу на всю жизнь найти правильный синтаксис. Или это как фоновые изображения, где изменение размера просто невозможно?
ETA: я склоняюсь к тому, чтобы либо а) изменить размер исходного изображения, чтобы он соответствовал "правильному" размеру, на стороне сервера и / или б) изменить разметку, чтобы просто добавить встроенный тег IMG. Я пытался избежать обеих этих вещей, но они звучат так, как будто они будут более совместимыми, чем пытаться делать вещи исключительно с помощью CSS. Кажется, ответ на мой первоначальный вопрос звучит так: "Иногда ты можешь это сделать".
16 ответов
Регулировка background-size разрешено Однако вам все равно нужно указать ширину и высоту блока.
.pdflink:after {
background-image: url('/images/pdf.png');
background-size: 10px 20px;
display: inline-block;
width: 10px;
height: 20px;
content:"";
}
Обратите внимание, что :after Псевдоэлемент представляет собой блок, который в свою очередь содержит сгенерированное изображение. Нет способа стилизовать изображение, но вы можете стилизовать коробку.
Следующее - только идея, и решение выше более практично.
.pdflink:after {
content: url('/images/pdf.png');
transform: scale(.5);
}
Недостатки: вам нужно знать внутренние размеры изображения, и оно оставляет вам пробелы, от которых я не могу избавиться от банкомата.
Поскольку мой другой ответ был явно не совсем понятен, вот вторая попытка:
Есть два подхода к ответу на вопрос.
Практично (просто покажи мне эту чертову картинку!)
Забудь о :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 все еще находится на ранней стадии разработки, и эта проблема еще не решена.
Вы должны использовать фон вместо изображения.
.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;
}
diplay: block; не иметь никакого эффекта
Положение также работает очень странно по отношению к основам интерфейса, так что будьте осторожны
body:before{
content:url(https://i.imgur.com/LJvMTyw.png);
transform: scale(.3);
position: fixed;
left: 50%;
top: -6%;
background: white;
}
Да, первоначальный вопрос был задан восемь лет назад, но сегодня он актуален, как и всегда. Я переходил от столпа к посту по этому вопросу:: раньше, примерно неделю:: после, и это заставляло меня идти за поворотом.
С этой и других страниц по этой теме - я наконец собрал все воедино и уменьшил размер изображения в псевдотеге.
** Текущая заметка.colnav - это просто мой контейнерный класс, который содержит набор тегов
Вместо установки ширины и высоты фонового изображения вы можете установить ширину и высоту самого элемента.
.pdflink::after {
content: '';
background-image: url(/images/pdf.png);
width: 100px;
height: 100px;
background-size: contain;
}
В настоящее время с помощью flexbox вы можете значительно упростить свой код и настроить только 1 параметр по мере необходимости:
.pdflink:after {
content: url('/images/pdf.png');
display: inline-flex;
width: 10px;
}
Теперь вы можете просто настроить ширину элемента, и высота будет автоматически регулироваться, увеличивать / уменьшать ширину, пока высота элемента не достигнет нужного вам числа.
Вы можете использовать zoom имущество. Проверьте это jsfiddle
Вот еще одно (рабочее) решение: просто измените размер изображения до нужного вам размера:)
.pdflink:after {
display: block;
width: 20px;
height: 10px;
content:url('/images/pdf.png');
}
вам нужно, чтобы pdf.png был 20px * 10px, чтобы это работало. 20px/10px в css здесь для того, чтобы указать размер блока, чтобы элементы, которые идут после блока, не все испортили с изображением
Не забудьте сохранить копию исходного изображения в его оригинальном размере
.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:"";
}
Вы можете изменить высоту или ширину элемента " До" или "После" следующим образом:
.element:after {
display: block;
content: url('your-image.png');
height: 50px; //add any value you need for height or width
width: 50px;
}
Я использовал эту ширину контроля размера шрифта
.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');
background-size: 100%;
content: ".......................................";
font-size: 30pt;
}
Сам наткнулся на это и обнаружил следующее: если вы заменяете контент наurl('/path/to/svg'), вы можете фактически установить размер изображения, используяwidth. Единственное предостережение заключается в том, что вы должны использовать размеры относительно корневого контекста, напримерvh,vw, , и т. д.
Вы можете поиграть с приведенным выше фрагментом и изменить ширину, чтобы увидеть, как это влияет на размер замененного элемента.1remобычно)16px(размер шрифта по умолчанию для<html>элемент), поэтому математикаyour_desired_widthделенное на16равна ширине вrem. По крайней мере, он стабильно работает в Firefox и Chrome, но Safari не проверял.
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
Вы можете использовать свойство масштабирования CSS для преобразования объекта, а если вы используете положение: абсолютное, то вы можете использовать свойство Transform-Origin.
.head-inner .confeti:after {content: url(img/flag2.png); position: absolute; right: 0; top: 0; transform: scale(.6); transform-origin: right top;}