幫助自動調整背景圖片的大小

是否有自動調整元素背景圖片大小的方法？例如，在我的html中，我想讓我的鏈接具有背景圖像。圖像傾斜了左右邊框和圓頂角。幫助自動調整背景圖片的大小

通常會指定一個錨點元素的寬度來容納背景圖片。我的問題是這個寬度應該是動態的，並且如果鏈接的寬度小於圖像的寬度，背景圖像也應該調整..有點像是以相反的方式做它..

對此有任何解決方案嗎？？謝謝！

2010-07-27 r2b2

有一個相當標準的方法來實現這個使用2個元素。

<a href="foo.html" class="button"><span>Button Text</span></a>

正如你所看到的你在鏈接中放置一個跨度，你將會得到按鈕。您正在使用的圖像需要分成兩部分，一部分是按鈕的左側和中間部分，另一部分是右側。您將包含的跨度設置爲按鈕圖像的寬左側。鏈接將包含按鈕的右側。 Css應該看起來像這樣

a{ 
background: url("rightimg.png") right no-repeat; 
display:block; 
padding-right: [width of image]; 
width:auto; 
height:[height of image]; 
line-height:[height of image] 
} 
a span{ 
background: url("leftimg.png") left no-repeat; 
display:block; 
width:auto; 
height:[height of image]; 
line-height:[height of image] 
} 
a{ 
background: url("rightHover.png") right no-repeat; 
} 
a span{ 
background: url("leftHover.png") left no-repeat; 
}

喲將需要調整你的CSS周圍，使其適合你的特定佈局。

左圖像在範圍內的原因是，如果您在按鈕上有任何透明度，則不必重疊圖像。切割圖像時請牢記這一點。

我會建議製作200像素以上的左圖像以允許大量的擴展空間。

來源

2010-07-27 16:28:40

啊，好老的「推拉門」技術！它通常工作得很好。 – Joshua 2010-07-27 16:35:03

@Josua：我實際上在內部元素是滑動門的情況下學到了這種技巧。很快發現，一旦我停止使用jpg圖像並開始使用帶有透明度的png，這是一種痛苦。 – 2010-07-27 17:01:31

和每一個：謝謝你的答覆。這工作！ – r2b2 2010-07-28 05:11:03

你知道背景圖片的大小嗎？

a 
{ 
    background: #ffffff url('yourimage.gif') no-repeat 0 0; 
    display: block; 
    width: XXXpx; 
    height: YYYpx; 
}

CSS無法進行計算，它是向頁面應用樣式的一種方式。

但是，如果您沒有專門設置高度和寬度，並且不顯示「display：block」，則圖像將成爲「a href」文本的寬度。

a 
{ 
    background: #ffffff url('yourimage.gif') no-repeat 0 0; 
}

來源

2010-07-27 16:32:44 NinjaCat

編輯：以上喬納森公園的解決方案是最好的，如果有問題的錨標籤的菜單項（例如，「標籤」或「按鈕」）。重讀你的問題後，我認爲是這樣。

您可能可以通過CSS3的background-size或border-image屬性實現所述效果。但是，我不確定當涉及的元素是內聯的並且包裝成兩行或多行時，瀏覽器如何處理這些屬性。此外，背景大小的屬性很可能會使您的圖像不合需要地傾斜。

請注意，也可以在沒有圖像的情況下實現此目的。你可以發佈你想要在你的錨標籤周圍創建的形狀的圖像嗎？

來源

2010-07-27 16:35:59 peterjmag

我只是想知道如何使用這種技術的表單按鈕。

鑑於因爲它越來越從文庫中產生的，我不能添加圍繞輸入標籤的包裝span標記。但我確實有類和id名稱可用於輸入標記。

來源

2011-01-27 06:48:06 user5858

幫助自動調整背景圖片的大小

回答

相關問題