Question

我试图在屏幕右侧放置一个背景图像，这样在中等屏幕上可以看到一半的背景图像和大图像上的整个图像（图像不应缩放）。问题是似乎没有办法将背景的左侧放置在具有未知宽度的div的中心。

我无法使用img代码，因为它会产生水平滚动条。

编辑：似乎没有办法以我想要的方式定位背景，至少在背景位置。您可以通过编写background-position: top 50px left 100px来覆盖任意一方的背景，但不能对位置center执行相同操作。我想知道为什么。

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

Answer 1

尝试设置背景大小和背景位置，如下所示：

public void onClickButton( View v){
     //Disconnect previous 
     mBluetoothLeService.disconnect();
     //Need to wait here...
     //Connect with new BLE
     mBluetoothLeService.connect(mDeviceAddress);
}

在这里你可以测试它：https://jsfiddle.net/dL2u6co7/

Answer 2

这是一个有效的解决方案。我在容器内添加了另一个具有绝对定位的块。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

2 个答案: