Question

我打算在div的角落里使用一个小图像作为调整大小的控制器。我有一个问题的例子：

#scroll {
  height : 200px;
  width : 200px;
  border : red 1px solid;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAAAsklEQVR4nNWQTYqEMBQG+77+8VD0LoaEkCDifTQa9S7VW6GdUadXs3iLWtRH8V7A65v7Sv7nA03T8OeBuq4ZhoF935/LVVXR9z3btj0vKMuSrutY15XHPxARvPfEGPHeIyL3C0QE5xwxRpxzHPlSLooCay3LsmCt5ciXBXmeY4xhnmeMMRz58gdZlqG1JoSA1poz/nEgTVOUUoQQUErxG3/ISZLQti3TNHGHTwvGceQuvwGzOfZWmm6CFQAAAABJRU5ErkJggg==) bottom right no-repeat; 
}

没有滚动条：https://jsfiddle.net/s78zkbj2/8/

滚动条：http://jsfiddle.net/s78zkbj2/9/

如您所见，我在背景上使用的图像（附在div的右下角）与滚动条重叠。

当显示滚动条时，是否可以通过CSS将背景图像移动到div的可见区域（从滚动条左侧）？

Answer 1

据我所知，如果没有javascript或jquery only by using css with your current design，最大化图像是不可能的。

Answer 2

可以定位背景图像，但如果我是你，我会做一些与众不同的事情。不要使用背景！只需在div中放入一个p标签，然后在p标签内放置所需的图像。将div定位为relative，将p定位为absolute。使用属性bottom和right来调整px 像这样：

CSS

#scroll {
position:relative;
height : 200px;
width : 200px;
border : red 1px solid;
overflow : auto;
}


p#resizer {
position:absolute; 
width:24px;
height:20px; 
bottom: 0;
right: 8px; 
margin:0;
padding:0;
overflow:hidden;
}

HTML

<div id="scroll">

1
<br>
        1
<br>    1
<br>    1
<br>    1
<br>
        1
<br>    1
<br>    1
<br>    1
<br>    1
<br>    1
<br>    1
<br>
        1
<br>
    <p id="resizer">
        img
    </p>
</div>

http://jsfiddle.net/s78zkbj2/10/

滚动条下的右下角背景

2 个答案: