CSS可以用來設置網頁上的動態圖片,下面將介紹幾種常用的設置方法。
/* 方法一:通過設置background屬性 */ .background-img { background-image: url("./img/background.jpg"); background-repeat: no-repeat; background-size: cover; } /* 方法二:通過設置img標簽 */ .img-container { position: relative; width: 400px; height: 300px; } .img-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 方法三:通過設置偽元素 */ .pseudo-element { position: relative; width: 200px; height: 200px; } .pseudo-element::before { content: ""; background-image: url("./img/flower.png"); background-repeat: no-repeat; background-position: center; background-size: contain; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
第一種方法通過給元素設置background-image屬性來顯示圖片,一般用于背景圖片的設置。需要設置background-repeat屬性來規定圖片是否重復,以及background-size屬性來控制圖片顯示大小。
第二種方法則是直接給img標簽設置寬高,并使用position屬性將其放在容器內的左上角,這樣可以讓圖片占據整個容器。
第三種方法利用CSS偽元素的特性,在容器內創建一個虛擬的元素,并給其設置background-image屬性來顯示圖片。同時利用position屬性將偽元素設置為絕對定位,從而讓圖片居中顯示。
上一篇mysql兩張表分頁
下一篇mysql兩張表合并顯示