CSS3中的偽元素after能夠為HTML元素添加后綴內容,我們可以利用它來應用圖片。下面的代碼演示了如何在一個a標簽中添加一個圖片。
a:after { content: ''; display: block; width: 50px; height: 50px; background: url('image.jpg') center center no-repeat; background-size: 100% 100%; }
在上述代碼中,我們為偽元素添加了一個空的content值,將其display屬性設置為塊級元素。由于沒有添加實際的HTML內容,因此我們可以通過其背景來添加圖片。
其中width和height屬性用于定義圖片大小,background則指向我們要使用的圖片文件。由于我們想要展示完整的圖片,因此使用了background-size: 100% 100%的屬性。
一旦應用了這段代碼,我們就可以看到我們添加的圖片出現在了a標簽的末尾。
下一篇php 結束