Центрируйте фон: изображение URL с помощью: after псевдоэлемента в CSS - PullRequest
Новая
       45

Центрируйте фон: изображение URL с помощью: after псевдоэлемента в CSS

0 голосов
/ 03 июня 2019

В CSS, как мне,

1) использовать :after псевдоэлемент для успешной вставки,

2) изображение background:url после некоторого текста,

3) который всегда центрируется при просмотре на большом большом экране или маленьком высоком экране?

(Примеры изображений ниже.)

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

Пожалуйста, оцените некоторую помощь.

Код

div:after { content: ''; background:url("https://ippcdn-ippawards.netdna-ssl.com/wp-content/uploads/2018/07/34-1st-PANORAMA-Mateusz-Piesiak-1.jpg"); width: 1200px; height: 474px; display: block; }

Изображения

Не правильно. Это текущий результат с кодом выше.

enter image description here

Правильно. Ожидаемый результат с выровненным по центру изображением на широком большом экране.

enter image description here

Правильно. Ожидаемый результат с выровненным по центру изображением на высоком маленьком экране.

enter image description here

1 Ответ

0 голосов
/ 03 июня 2019

Мне удалось достичь желаемого результата, поместив текст в тег p > span и применив элемент :after к внешнему p. Затем я дал элементу span максимальную ширину и отцентрировал его так, чтобы изображение казалось переполняющим контейнер span. Смотрите мое решение: 

p:first-of-type:after { 
  content: '';
  background:url("https://ippcdn-ippawards.netdna-ssl.com/wp-content/uploads/2018/07/34-1st-PANORAMA-Mateusz-Piesiak-1.jpg");
  width: 1200px;
  height: 474px;
  display: block;
  max-width: 100%;
  margin: 10px 0;
}

span {
  display: block;
  max-width: 70%;
  margin: 0 auto;
}
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu ipsum eget elit egestas ultrices. Sed dui mauris, efficitur sit amet malesuada at, dictum quis elit. Pellentesque ac placerat ante. Nulla augue arcu, blandit quis nulla vitae, posuere gravida neque. Aenean leo erat, porttitor maximus nunc non, mollis ultrices dui. Maecenas consectetur eleifend ligula, quis rutrum leo suscipit id. Morbi pulvinar et est sit amet lacinia.</span></p>
<p><span>Nulla vitae magna at mi tempus cursus. Vestibulum purus purus, facilisis a lectus ac, gravida porta tellus. Integer auctor justo at tempus ultricies. Mauris ut eleifend nibh. Nullam fermentum dui in sem congue semper. Quisque eget pharetra enim. Aliquam erat volutpat. Donec nec fringilla augue, sed blandit neque. Aliquam sollicitudin, ante id accumsan fermentum, urna turpis lacinia metus, a ullamcorper enim velit vitae diam.</span></p>
...