返回
Featured image of post CSS基礎複習-圖片篇

CSS基礎複習-圖片篇

圖片,有<img>又有background style,到底?

一個是圖片的 HTML Tag , 一個是背景圖的使用,於SEO使用上在圖片列表要有 img Tag 會比較妥當,如果是為了瀏覽器的響應式更彈性使用會是使用 background image 去調整為好調整。


background-color - 背景色

div {
    background-color: #666666;
}

background-image - 背景圖

div {
    background-image: url('https://image.cache.storm.mg/styles/smg-800x533-fp/s3/media/image/2016/02/25/20160225-033457_U3927_M131923_2073.png?itok=fOdkVYDV');
    /* 最常使用是絕對位置,也可以用網址 */
}

background-repeat - 背景重複

div {
    background-repeat: repeat;
    /* no-repeat 不重複 */
}

background-attachment - 背景釘選

div {
    background-attachment:scroll;
    /* fixed 釘選 */
}

background-position - 背景位置

div {
    background-position:right top;
    /* left bottom 圖片的顯示 從區塊的某點位置輸出 */
}
Licensed under CC BY-NC-SA 4.0
comments powered by Disqus