在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>