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

-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

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

回答

相关问题