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