Question

我正在努力完成以下任务：

我已修复了左侧边栏的宽度百分比，如下所示：

.sidebar {
   position: fixed;
   background-color: tomato;
   width: 35%;
   height: 400px;
}

..和一个带有固定背景图像的右侧容器：

.right {
   background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no-repeat fixed;
   height: 400px;
}

如何让背景图像从侧边栏的宽度结束而不是之后开始？

这是小提琴：http://jsfiddle.net/EKqPg/（不透明度属于演示用途）

Answer 1

.right {
background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no-    repeat fixed;
min-height: 400px;
background-size: 65%;
background-position: left 100% top 0px;

}

http://jsfiddle.net/aronez/EKqPg/4/

这样的事情？

Answer 2

我认为这就是你要找的东西：

将background-position属性添加到.right

有关此媒体资源的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

.right {
background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no-repeat;
height: 400px;
background-position:289px,0px;
}

更新小提琴：

http://jsfiddle.net/EKqPg/1/

Answer 3

根据我的理解，你绝不希望在'左'的.right内有任何内容，所以为什么不给它（100-35）％= 65％宽度并向右浮动？

.sidebar {
  width: 35%;
  float: right;
}

小提琴： http://jsfiddle.net/Q4Hey/

使用背景定位属性执行此操作的唯一可靠方法将最终破坏宽高比，除非您可以定义绝对宽度（不是％）：

.sidebar {
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: 65% 100%;
}

小提琴： http://jsfiddle.net/K9N8p/

修复了带有固定背景图像的侧边栏和右侧内容

3 个答案: