CSS中,我們可以使用`position: fixed`這個屬性讓圖片隨著屏幕而固定不動,這在網頁設計時是一個很常見的效果。下面我們來看看具體的實現方法:
img{ position: fixed; top: 0; right: 0; }
上面的代碼讓圖片位于網頁的右上角,當我們滾動頁面時,圖片始終固定在該位置。其中,`position: fixed`表示該元素固定于可視區域,不會隨滾動而改變位置。`top`和`right`兩個屬性指定了元素距離頁面頂部和右側的距離。
如果我們想要讓圖片固定于屏幕中央,可以使用以下CSS:
img{ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
其中,`top: 50%`和`left: 50%`將圖片定位于屏幕中心,`transform: translate(-50%, -50%)`則是將圖片向左上方移動自身寬高的一半,從而確保圖片完全出現在屏幕中央。
以上就是CSS中實現圖片固定于屏幕的方法,這個技巧可以讓我們在網頁設計中實現很多有趣的效果,比如添加側邊導航、浮動菜單等。