響應/相對定位背景圖片

Question

問題我正在將錨點上的背景圖像作爲之前元素在您調整屏幕大小時需要隨文本一起移動。

我需要使用背景圖像來保持它的位置（例如left：20px;），並在調整屏幕大小時使用文本。

這裏是我的CSS：

ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

ul li { 
    float: left; 
    width: 50%; 

} 

ul li a { 
    display: block; 
    padding: 15px 20px; 
    text-align: center; 
    text-decoration: none; 
    font-weight: bold; 
    position: relative; 
    color: #717171; 
} 

ul li a:before { 
    background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px; 
    content: ''; 
    display: block; 
    width: 34px; 
    height: 33px; 
    position: absolute; 
    top: 10px; 
} 

.link-1:before { 
    left: 20px; 
} 

.link-2:before { 
    left: 0px; 
} 

這裏是一個工作示例：http://jsfiddle.net/2KHS6/

所有的建議表示歡迎

Answer 1

新版本：

http://jsfiddle.net/2KHS6/5/

希望它能滿足您的需求。您可能想要設置min-width以避免小屏幕出現問題。我基本做到了這一點：

ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

ul li { 
    display: inline-block; 
    width: 50%; 
    margin: 10px 0; 
    /* So things don't get crazy */ 
    min-width: 160px; 
    /* center the child, the <a> */ 
    text-align: center; 
} 

ul li a { 
    display: inline-block; 
    text-decoration: none; 
    font-weight: bold; 
    color: #717171; 
    /* Should be the same height as the img so it stays centered */ 
    line-height: 33px; 
} 

ul li a:before { 
    background: url(http://graphicclouds.com/wp-content/uploads/img/73-google-style-icons-thumb.jpg) no-repeat -11px -26px; 
    content: ''; 
    display: block; 
    width: 34px; 
    height: 33px; 
    position: absolute; 
    /* position the image at the left of the a. There are many methods to do this actually */ 
    margin: 0 0 0 -50px; 
}