Можете ли вы применить ширину к псевдоэлементу: before /: after (content: url (image))?

Это в дополнение к моему недавнему вопросу: Можно ли использовать псевдоэлементы, чтобы содержащие элементы оборачивались вокруг абсолютно позиционированного элемента (например, clearfix)?

JSFiddle: http://jsfiddle.net/derekmx271/T7A7M/

Я пытаюсь использовать псевдоэлементы, чтобы «очистить» абсолютно позиционированные изображения. Я дошел до того, что получил одно и то же изображение для отображения за слайдами, но не могу применить ширину к вставленному изображению. Я сумасшедший, или вы НЕ можете применять ширину к псевдоэлементам, содержимое которых имеет значение content: url (img / image.jpg)? Пробовал разные варианты отображения: блок и т. Д. - безрезультатно ...

#slider ul:after {
  content: url(http://www.cs7tutorials.com/img/slide1.jpg);
  display: block;
  position:relative;
  width:70px;
}

Мне нужно установить ширину изображения псевдоэлемента на 100% и максимальную ширину на 800 пикселей, чтобы оно имело те же размеры, что и мои слайды.


css responsive-design pseudo-element css-content
person derekmx271    schedule 20.02.2013    source источник
comment
Почему бы вам не назвать свое изображение фоном в псевдоконтейнерах? Таким образом, вы можете контролировать его размеры, используя background-size:100%, а ваш псевдоконтейнер - width:100%; max-width:800px.   -  person otinanai    schedule 20.02.2013
comment
Я постараюсь. Но где псевдоконтейнер получит свои размеры? @otinanai   -  person derekmx271    schedule 20.02.2013
comment
Мне нужно, чтобы псевдоэлемент сохранял те же размеры, что и слайды, за которыми он расположен :(   -  person derekmx271    schedule 20.02.2013
comment
Контейнер рухнул ...   -  person derekmx271    schedule 20.02.2013

Ответы (3)


arrow_upward
27
arrow_downward

Вы не сумасшедшие: действительно невозможно изменить размеры изображения, вставленного с использованием content, независимо от того, вставлено ли оно с помощью url(), image(), image-set(), element() или градиента CSS. Изображение всегда отображается как есть. Это называется замененным содержимым или замененным элементом ( за исключением того, что мы не говорим здесь об элементах).

Однако, поскольку замененные элементы можно изменить размер с помощью width и height, как описано в раздел 10 спецификации CSS2.1, возникает вопрос, почему эти свойства здесь не применяются. Казалось бы, ответ на этот вопрос заключается в том, что свойства действительно применяются, но вместо этого к блоку псевдоэлемента - вы можете увидеть это, присвоив псевдоэлементу цвет фона. Вместо того, чтобы заменять сам блок псевдоэлемента, изображение визуализируется как дочерний блок псевдоэлемента и поэтому вообще не может быть стилизовано (поскольку для этого потребуется другой псевдоэлемент, который не не существует).

Отсюда возникает другой вопрос: почему он вообще не заменяет блок псевдоэлементов? К сожалению, CSS2.1 вообще не определяет такое поведение, поэтому согласованная реализация заключается в том, чтобы вместо этого отображать контент как дочерний элемент блока псевдоэлемента:

CSS2.1 не совсем четко определяет модель обработки «содержимого» в :: before и :: after, но информативные примеры в CSS 2.1, тот факт, что «контент» определяет список вещи, и стремление к согласованности привело к тому, что поведение UA стало следующим: свойство 'content' определяет список вещей, которые становятся дочерними элементами блока :: before или :: after.

-Борис

Надеюсь, этот вопрос будет рассмотрен в дальнейшем на уровне 3 CSS Generated Content, работа над которым только началась.

Между тем, если вы хотите иметь возможность изменять размер псевдоэлемента :after и созданного изображения, вам нужно будет вместо этого применить его в качестве фонового изображения и - при условии, что поддержка браузера не является проблемой - использовать background-size вместе с width и height для его масштабирования (исходя из того, что эти свойства применяются вместо этого к блоку псевдоэлемента).

person BoltClock    schedule 20.02.2013
comment
Разве вы не знаете случайно, зафиксировано ли это ограничение где-нибудь? Мне не удалось найти его здесь - person user3790069; 17.02.2015
comment
@ user3790069: Нет, я тоже не нашел. Это проблема. У меня есть возможное объяснение, но я думаю, что собираюсь предложить его в стиле www и посмотреть, прав ли я, и если да, то обновлю свой ответ. - person BoltClock; 17.02.2015
comment
Лучший ответ по теме! - person krulik; 26.06.2016

arrow_upward
0
arrow_downward

Взгляните на демонстрацию, используя background-image: http://jsfiddle.net/T7A7M/12/

person otinanai    schedule 20.02.2013
comment
Однако кажется, что вам нужна определенная высота для вашего псевдоэлемента. - person otinanai; 20.02.2013
comment
Он определенно уменьшил отображение изображения, однако он потерял способность толкать элементы вниз ... Я думаю, что я просто тянусь к звездам здесь, чтобы решить дилемму абсолютного позиционирования. - person derekmx271; 20.02.2013
comment
Если вы установите height для псевдоэлемента, он подтолкнет другой элемент вниз. - person otinanai; 20.02.2013

arrow_upward
0
arrow_downward

Вы можете установить ширину или высоту, но не обе сразу, используя display: flex и установив flex-direction на противоположную ось размера, который вы хотите установить.

Например:

.setWidth::before {
    content: url("myImg.png")
    display: flex;
    flex-direction: column;
    width: 200px;
}

.setHeight::before {
    content: url("myImg.png")
    display: flex;
    flex-direction: row;
    height: 200px;
}

Демонстрация здесь.

person nHaskins    schedule 04.05.2021