右邊的背景圖像填充

如何在div的右側設置背景圖像，並從右側設置填充而不定義從左側的固定距離？例如，我想將圖像設置在div的右側，並且始終從右側開始填充20px。右邊的背景圖像填充

div的寬度並不總是相同的，這就是爲什麼我無法定義準確的位置。我只是想讓它在右側有精確的20px填充，不管div的寬度是多少。

我想下面的代碼，但它不起作用。

HTML：

<div>Title</div>

CSS：

div{ 
    background: url(gowalla.png) no-repeat right center; 
    width: 400px; 
    border: 1px solid red; 
    padding: 20px; 
}

演示： http://jsfiddle.net/mQGcF/

來源

2013-01-08 user1251698

用做它background-position: 96% 50% ;

第一個值表示x-axis，第二個值表示y-axis。

SEE THIS LINK的解釋。

div{ 
    background: url(http://cdn1.iconfinder.com/data/icons/35-Sweet-social-icons/32/gowalla.png) no-repeat 96% 50% ; 
    width: 400px; 
    border: 1px solid red; 
    padding: 20px; 
}

DEMO

更新回答

嘗試增加一個外層div並指定裕度內的div

HTML

<div class="wrap"><div>Title</div></div>

CSS

.wrap{ 
     border:solid 1px green; 
     display:inline-block; 
     width:auto; 
    } 
    .wrap div{ 
     width: 400px; 
     background: url(http://cdn1.iconfinder.com/data/icons/35-Sweet-social-icons/32/gowalla.png) right no-repeat; 
     margin-right: 20px; 
     padding:20px 
    }

DEMO 2

來源

2013-01-08 07:17:08 Sowmya

我覺得一定要實現這個沒有設定特定的左側位置所需要的問題嗎？ –

@GarethCornish我現在看到了，並更新了答案 – Sowmya

據我所知，你不能用CSS做到這一點。只有兩種選擇：

在圖像中包含間距。這可能是不可能的，但如果是最簡單的，那就是可能的。
使用兩個包含DIV標籤。一個擁有邊界，外部空間，第二個擁有背景。
```
<div class="outer"><div class="inner">Title</div> 
```

和CSS

.outer{ 
    width: 400px; 
    border: 1px solid red; 
    padding: 0px 20px; 
} 
.inner{ 
    background: url('gowalla.png') no-repeat right center; 
    padding: 20px 0px; 
}

http://jsfiddle.net/mQGcF/4/

來源

2013-01-08 07:25:11

當你將寬度指定到外部div時，我將會遇到問題，因爲OP提到寬度不固定。 – Sowmya

寬度只是從原始示例中複製而來。您可以將其更改爲任何您喜歡的內容，或將其完全取出 - 背景仍可正確定位。 –

U可以使用

padding-right:20px;

或

padding:0px 20px 0px 0px;

演示here

來源

2013-01-08 07:29:11

它如何提供正確的填充圖像？ – Sowmya

img {width：100;高度：100像素;保證金左：自動; margin-right：20px;} –

這是bg圖像，而不是內嵌圖像 – Sowmya

右邊的背景圖像填充

回答

相關問題