定位CSS背景圖像x右邊的像素?

本文翻譯自:Position a CSS background image x pixels from the right?

I think the answer is no, but can you position a background image with CSS, so that it is a fixed amount of pixels away from the right? 我認爲答案是否定的,但是你可以用CSS定位背景圖像,這樣它就是遠離右邊的固定數量的像素嗎?

If I set background-position values of x and y, it seems those only give fixed pixel adjustments from the left and top respectively. 如果我設置x和y的background-position值,那麼它們似乎只分別從左側和頂部進行固定像素調整。


#1樓

參考:https://stackoom.com/question/DPkY/定位CSS背景圖像x右邊的像素


#2樓

If the container has a fixed height: Tweek the percentages (background-position) until it fits correctly. 如果容器具有固定高度:調整百分比(背景位置)直到它正確適合。

If the container has a dynamic height: If you want a padding between your background and your container (such as when custom styling inputs, selects), add your padding to your image and set the background position to right or bottom. 如果容器具有動態高度:如果要在背景和容器之間填充(例如在自定義樣式輸入,選擇時),請將填充添加到圖像並將背景位置設置爲右側或底部。

I stumbled on this question while I was trying to get the background for a select box to fit say 5 px from the right of my select. 當我試圖獲得一個選擇框的背景以適合我選擇右邊的5 px時,我偶然發現了這個問題。 In my case, my background is an arrow down that would replace the basic drop down icon. 在我的情況下,我的背景是一個向下箭頭,將取代基本的下拉圖標。 In my case, the padding will always remain the same (5-10 pixels from the right) for the background, so it's an easy modification to bring to the actual background image (making its dimensions 5-10 pixels wider on the right side. 在我的情況下,填充將始終保持相同(從右邊5-10個像素)的背景,因此這是一個簡單的修改,以帶到實際的背景圖像(使其尺寸在右側寬5-10像素。

Hope this helps! 希望這可以幫助!


#3樓

background-position: right 30px center;

It works in most browsers. 它適用於大多數瀏覽器。 See: http://caniuse.com/#feat=css-background-offsets for full list. 請參閱: http//caniuse.com/#feat=css-background-offsets以獲取完整列表。

More information: http://www.w3.org/TR/css3-background/#the-background-position 更多信息: http//www.w3.org/TR/css3-background/#the-background-position


#4樓

Image workaround with transparent pixels on the right to serve as right margin. 圖像解決方法右側有透明像素,可用作右邊距。

The image workaround for the same is to create a PNG or GIF image (image file formats that support transparency) which has a transparent portion on the right of the image exactly equal to the number of pixels that you want to give a right margin of (eg: 5px, 10px, etc.) 同樣的圖像解決方法是創建PNG或GIF圖像(支持透明度的圖像文件格式),圖像右側的透明部分恰好等於您想要給出右邊距的像素數(例如:5px,10px等)

This works well consistently across fixed widths as well as widths in percentages. 這在固定寬度和百分比寬度上都能很好地協同工作。 Practically a good solution for accordion headers having a plus/minus or up/down arrow image on the header's right! 實際上是手風琴標題的一個很好的解決方案,在標題右側有正/負或上/下箭頭圖像!

Downside: Unfortunately, you cannot use JPG unless the background portion of the container and the background color of the CSS background image are of the same flat color (with out a gradient/vignette), mostly white/black etc. 缺點:不幸的是,你不能使用JPG,除非容器的背景部分和CSS背景圖像的背景顏色是相同的平面顏色(沒有漸變/暈影),主要是白/黑等。


#5樓

Solution for negative values. 負值的解決方案。 Adjust the padding-right to move the image. 調整右側填充以移動圖像。

<div style='overflow:hidden;'>

    <div style='width:100% background:url(images.jpg) top right; padding-right:50px;'>

    </div>

</div>

#6樓

只需將像素填充放入圖像中 - 將10px或其他任何內容添加到photohop中圖像的畫布大小,並在CSS中對齊它。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章