css如何讓圖片居左上角顯示

這篇文章給大家分享的是有關(guān)css如何讓圖片居左上角顯示的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

方法：1、利用“元素{background-image:url(圖片元素);}”語(yǔ)句將圖片設(shè)置為元素的背景圖片；2、利用“元素{background-position:left top;}”語(yǔ)句來(lái)定位背景圖片，讓背景圖片居右上角顯示即可。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

1、新建一個(gè)html文件，命名為test.html，用于講解css+div怎么讓背景圖片div的左上角。使用div創(chuàng)建一個(gè)模塊，用于測(cè)試。給div標(biāo)簽添加一個(gè)class屬性，設(shè)置為mybg。

2、在css標(biāo)簽內(nèi)，通過(guò)class設(shè)置div的樣式，定義它的寬度300px，高度為300px，邊框?yàn)?px。再通過(guò)background-image屬性設(shè)置背景圖片為1.png，通過(guò)background-repeat設(shè)置背景圖片不平鋪，并將background-position屬性設(shè)置為“l(fā)eft top”，控制背景圖片在左上角。

在瀏覽器打開(kāi)test.html文件，查看實(shí)現(xiàn)的效果。

總結(jié)：

1、使用div創(chuàng)建一個(gè)模塊，給div標(biāo)簽添加一個(gè)class屬性。

2、在css標(biāo)簽內(nèi)，通過(guò)class設(shè)置div的樣式，定義它的寬度300px，高度為300px，邊框?yàn)?px。

3、在css標(biāo)簽內(nèi)，再通過(guò)background-image屬性設(shè)置背景圖片為1.png，通過(guò)background-repeat設(shè)置背景圖片不平鋪，并將background-position屬性設(shè)置為“l(fā)eft top”，控制背景圖片在左上角。

感謝各位的閱讀！關(guān)于“css如何讓圖片居左上角顯示”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！