需要一個元素來創建一個能夠響應的背景圖像

-1

到目前爲止，我已經能夠大多使用CSS3爲漸變等元素設置樣式了。現在我已經達到了某個樣式不能完全完成的點我想如何重新創建它：http://oi40.tinypic.com/de8svm.jpg 需要一個元素來創建一個能夠響應的背景圖像

所以我使用該圖像作爲div的背景圖像。現在的問題是，使用background-size:100%屬性和值，當然允許圖像拉伸，但它也略微移動它的位置，並變得有點模糊。我希望圖像能夠調整大小並保持其位置，儘管我認爲這樣的事情可能是不可能的。我想知道什麼是最好的方式去做這件事將是接近我想要的。

來源

2013-10-19 Brandon

對於它的價值，他是一個半緊密CSS3的解決方案。這不是完美的，但如果你想使用它，感覺自由。 http://codepen.io/bbuck/pen/DKlvb –

嘿，謝謝很多人。它會做的。 – Brandon

我想你可能會有點倉促駁回CSS ...你應該能夠複製，使用這些方針的東西：

.css { 
    width: 98%; 
    height: 13%; 
    background: -webkit-linear-gradient(90deg, #2c3439 0%, #2c3439 50%, #667680 70%, #5d6f7b 100%); 
    border-top-left-radius: 15px 8px; 
    border-top-right-radius: 15px 8px; 
    border-bottom-left-radius: 15px 8px; 
    border-bottom-right-radius: 15px 8px; 
    box-shadow: inset 3px 5px 5px #95aab9, inset -1px -5px 7px #242b2f, 3px 2px 6px #777; 
}

如果您確定您想要去的圖像路線，嘗試使用類似background-size: contain;的內容來保持圖像的高寬比，同時填充容器的至少一個範圍。

您可以使用寬度和高度以及填充來使容器儘可能地接近縱橫比。

看看這個演示，展示你的形象我的兩個CSS版本和background-size屬性：

http://jsfiddle.net/GfEA7/

來源

2013-10-19 03:20:19

1+應該是被接受的答案。 –

我同意，希望我先看過這個。非常感謝喬希。 – Brandon

您的形象不失質量。它看起來不同，有時更加模糊，因爲寬高比正在改變。爲防止這種情況發生，您可以允許用戶一次只更改高度或寬度，但不能同時更改高度或寬度。

當用戶更改高度時，會自動調整寬度以保持當前寬高比。當用戶改變寬度時，高度會自動調整。

來源

2013-10-19 03:11:27

我正在嘗試background-size：100％27px;所以高度設置。任何方式來做這樣的事情，而不失去長寬比或沒有丟失長寬比的影響？ – Brandon

需要一個元素來創建一個能夠響應的背景圖像

回答

相關問題