2016-08-30 171 views
0

林不知道這是可能的。CSS背景圖像。在文字位置

我有一些文字的星形背景圖片,它位於容器的左下角。見下面的圖片: enter image description here

但是,當它在移動瀏覽的星尚左下方..

enter image description here

有沒有辦法在文本的底部左側區域將它定位創建相同的包裝效果?就像這樣:

enter image description here

+1

當然,使用'位置:absolute'和調整與媒體查詢位置。 –

+0

使用'@ media'是爲較小的窗口(移動設備)指定特殊樣式的一種好方法,就像這樣。介質中指定的樣式僅在窗口在提供的閾值內時應用。 – leigero

+0

可以分享你的代碼嗎? – Aravind

回答

0

像評論,媒體查詢和位置是一個可行的解決方案:

.container{ 
    position: relative; 
} 
.star { 
    position: absolute; 
} 

@media (max-width: 480px) { 
    .star { 
     left: 50%; 
     transform: translateX(-50%); 
     /* bottom: 0; */ /* if it goes at the bottom, up to you homie */ 
    } 
} 
+0

這是一種用於多段文字的風格,將其定位50%可能並不總是奏效,因爲在不同區域中可能有更多的文字。如果可能的話,它需要根據左下角的字母進行定位 – lbollu

+0

是的,您必須定位,因爲您正在使用這些圖像。它相對於容器是50%,所以你可以玩你喜歡的。 –