在屏幕的右半部分放置背景圖像

-1

我想在屏幕的右側放置背景圖像，以便在中型屏幕上可以看到一半的圖像和大圖像（圖像不應縮放）。問題是，似乎沒有辦法將背景的左側定位在div寬度未知的中心。在屏幕的右半部分放置背景圖像

而且我不能使用img標記，因爲它會產生一個水平滾動條。

編輯：似乎沒有辦法以我想要的方式放置背景，至少在背景位置。您可以通過編寫background-position: top 50px left 100px抵消任何一方的背景，但是您不能在center的位置執行同樣的操作。我想知道爲什麼。

schema http://i68.tinypic.com/dhdf9s.png

來源

2016-11-29 Simoroshka

這裏是一個可行的解決方案。我在容器中添加了一個絕對定位的塊。

.container { 
 
    margin: 50px; 
 
    padding: 10px 10px; 
 
    position: relative; 
 
    width:400px; 
 
    height:270px; 
 
    border:2px solid red; 
 
} 
 
.text { 
 
    float: left; 
 
    height: 200px; 
 
    width: 150px; 
 
    background-color: green; 
 
} 
 
.bg { 
 
position: absolute; 
 
top: 10px; 
 
left: 50%; 
 
width: 50%; 
 
height: 250px; 
 
background-image: url('http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg'); 
 
background-position: 0 0; 
 
background-repeat:no-repeat; 
 
background-size: cover; 
 
}

<div class="container"> 
 
    <div class="text"> 
 
    Text block 
 
    </div> 
 
    <div class="bg"> 
 
    </div> 
 
</div>

來源

2016-11-30 09:43:07 Simoroshka

已經嘗試設置背景大小和背景的位置，像這樣：

background-position: 100% 0; 
background-size:50%;

在這裏，您CA測試：https://jsfiddle.net/dL2u6co7/

來源

2016-11-30 08:56:01 Mat

這始終顯示整幅圖像，而我需要只有它的一半，如果它不適合（而不是調整）。如果可以從背景位置中心偏移，就足夠了，但顯然它不起作用。 – Simoroshka

在屏幕的右半部分放置背景圖像

回答

相關問題