在CSS中使用：after伪元素将background：url图像居中

Question

在CSS中，我该如何做，

1）使用:after伪元素成功插入，

2） background:url一些文字后的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; }

---

图片

不正确。 这是上面代码的当前结果。

正确。 大屏幕上居中对齐图像的预期结果。

正确。 较高的小屏幕上中心对齐的图像的预期结果。

Answer 1

通过将文本放在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>