我有一个我无法在 css 中解决的问题。在图像 slider 的底部,我有三个圆圈,但它们需要有点响应,以便笔记本电脑上从 13' 到 21' 的每个人都可以在它们的确切位置看到它们。但是当我调整屏幕大小时,这些圆圈会松动它们的位置并且会被放置得更高或更低。 Here is the example我说的是,当你调整屏幕大小时,你会看到圆圈不在它们原来的好位置,在图像的底部。 I am working towards this .我的代码如下:
CSS
.bxslider {
margin: 0;
padding:0;
}
#bijschrift {
position: relative;
left: 65%;
height: auto;
bottom: 250px;
float: left;
z-index: 9999;
}
#bijschrifthoofd {
z-index: 9999;
opacity: 0.8;
padding-left: 10px;
padding-right: 10px;
background-color: #212121;
}
#bijschrifthoofd span {
width: auto;
color: white;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
line-height: 45px;
font-size: 150%;
}
#bijschriftonder {
z-index: 9999;
opacity: 0.8;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
background-color: #212121;
float: left;
}
#bijschriftonder span {
width: auto;
color: white;
font-family: 'Open Sans', sans-serif;
font-weight:100;
line-height: 45px;
font-size: 22px;
}
#cirkelcontainer {
width: 100%;
height: auto;
position: relative;
bottom: 200px;
z-index: 9999;
display: block;
}
.circle
{
display:table-cell;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#00ccff;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
.circle2 {
display:table-cell;
margin-left: 2%;
z-index: 9999;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#e05c50;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
.circle3 {
display:table-cell;
margin-left: 10%;
z-index: 9999;
width:80px;
height:80px;
border-radius:40px;
font-size:16px;
color:white;
vertical-align: top;
text-align:center;
background:#0099cc;
float: left;
font-family: 'Open Sans', sans-serif;
font-size: 22px;
line-height: 80px;
}
HTML
<ul class="bxslider" >
<li><img src="fotos/Untitled-5.jpg" title="Funky roots" /></li>
<li><img src="fotos/Untitled-4.jpg" title="The long and winding road" /></li>
<li><img src="fotos/Untitled-3.jpg" title="Happy trees" /></li>
</ul>
<div id="bijschrift">
<div id="bijschrifthoofd"><span>UW SPRINGPLANK NAAR INSPIRATIE</span></div>
<div id="bijschriftonder"><span>En authentieke waterpret</span></div>
</div>
<div style="clear:both"></div>
<div id="cirkelcontainer">
<div class="circle">O</div>
<div class="circle2">IB</div>
<div class="circle3">T</div>
</div>
</body>
</html>
最佳答案
我不确定圆圈的“确切位置”在哪里。我假设它位于底部的图像上方,如下所示:
所以我把圆圈的 Html 改成了这样:
<div id="circle1" class="circle">O</div>
和 Css,因此我们可以使用单个圆圈样式定义:
.circle {
position: absolute;
width:80px;
height:80px;
border-radius:40px;
...
}
#circle1 {
left: 60px;
background:#00ccff;
您仍然应该向整个网站添加一个“最小宽度”属性。
我在这里更新了解决方案http://jsfiddle.net/Y65mW/3/embedded/result/
关于css - 使图像底部的 css 圆圈响应并位于固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17653995/