CSS背景圖像和背景大小：擴大寬度

我處於某種情況，因爲我需要進行較小的CSS調整，但沒有觸摸圖形的權限。在這種情況下，我有一個背景圖像（在Photoshop中有一個461px的寬度），我需要擴大它4-5像素。CSS背景圖像和背景大小：擴大寬度

對CSS此圖片的電流爲：

#screenvolumeslidermenu{ 
    background:url(../html_cmi/lopa/volume_bg_overlay.png) no-repeat; 
    background-size:100%; 
    width:461px; 
    height:51px; 
    position:fixed; 
    z-index:15; 
    top:678px; 
    left:70px; 
    display:none; 
}

它最初並未有no-repeat財產，但如果我採取出來，只是增加當前寬度，圖像將開始重複。如果我按原樣放置並增加寬度，則不會發生可見的變化，但使用檢查元素的寬度在技術上會增加。看到這裏： enter image description here

我想在黑色矩形的右側擴展一些像素在右側。

我嘗試使用background-size，但沒有得到任何體面的結果。

這裏最好的解決方案是擴展圖像寬度而不用在Photoshop中觸摸它？

來源

2014-01-27 DnfD

由於您的圖片左側的箭頭與背景的其餘部分相結合，因此沒有辦法使用CSS來處理此問題。如果你想避免使用Photoshop，唯一可以做的就是添加一個相鄰的背景元素，並將其設置爲相同的樣式，但這真的很黑。 –

嗯，我明白了。所以箭頭正在把所有東西搞砸，或多或少？ – DnfD

在你的情況。理想的方法是使用CSS創建整個事物。創建主矩形並使用:before和:after創建具有邊框樣式的箭頭。 Check this site out

.arrow_box { 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before { 
    right: 100%; 
    top: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-right-color: #88b7d5; 
    border-width: 30px; 
    margin-top: -30px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-right-color: #c2e1f5; 
    border-width: 36px; 
    margin-top: -36px; 
}

來源

2014-01-27 18:27:17

我儘可能只使用CSS，並且您鏈接的網站非常棒。作爲一個很好的解決方案給予upvote，但不幸的是我需要使用背景圖像。 – DnfD

如果你真的陷入困境，你可能想嘗試在image元素之後添加一個額外的元素。樣式相同，給它一個你需要的寬度和'位置：絕對'它在圖像的末尾。 –

1）背景的尺寸可以接受兩個值，例如

background-size: 200% 100%;

應該讓你伸展只有一個尺寸（可以使用像素太）。 2）如果您不想觸摸比例，請考慮創建另一個具有相同背景圖像，但與右邊緣對齊的較窄元素，並將其放置在第一個元素上，並對齊到右側。然後通過像滑尺一樣移動右邊的一塊，就可以改變整體寬度而不會扭曲圖形。

來源

2014-01-27 18:29:18

我會嘗試一下，讓你知道它是如何去。感謝您提供建設性的答案。 – DnfD

CSS背景圖像和背景大小：擴大寬度

回答

相關問題