滚动条下的右下角背景

时间:2015-02-19 11:01:42

标签: css background scrollbar

我打算在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的可见区域(从滚动条左侧)?

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

可以定位背景图像,但如果我是你,我会做一些与众不同的事情。 不要使用背景!只需在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/