作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是前端编码的新手。我刚刚通过复制此处的 css 在我的网页中添加了一个进程栏 http://kodhus.com/newsite/step-progress-bar-css-only .现在我需要将 balls 中的数字替换为“选中”图标。我有一张选中图标的 jpg 图片,但我没有努力证明它有效:
.progressbar li:before {
width: 30px;
height: 30px;
/*content:url('checked2.jpg');*/
/*content: counter(step); */
content: 'v';
/*class: glyphicon glyphicon-ok;
counter-increment: step;*/
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
我尝试将我的 jpg 存储到 django 根目录、静态目录和模板目录中,但它们都不起作用。运行上面的代码,我得到了 'v' 进入我的球,它对所有人来说都是如此。
将上面的定义改为
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
counter-increment: step;
line-height: 27px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
background: (https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTLB-KSrRyq61FczWe9AUdEdz2GJfs51oNKuiF_c3dfkRH23Ii9);
background-size: cover;
background-repeat-y: no-repeat;
background-position: center center;
/* z-index: 1111; */
}
我设法让 checked-icon 进入每个圈子(li-element)。
但实际上我只需要检查某些 li 元素。我在 jquery 中尝试了以下操作,但它根本不起作用(它似乎绘制了一个新圆圈而不是修改现有的圆圈,并且选中的图像不再适合圆圈)
修改前的 CSS:
.progressbar li:before {
width: 30px;
height: 30px;
content: counter(step);
counter-increment: step;
line-height: 30px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
}
html:
<div class="container">
<ul class="progressbar">
<li id="first">login</li>
<li id="second" class="active">choose interest</li>
<li id="third">add friends</li>
<li id="fourth">View map</li>
</ul>
jquery 将 checked-sign 添加到第一个 li 元素中
$("#first").css('content','');
$("#first").css('background', '(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTLB-KSrRyq61FczWe9AUdEdz2GJfs51oNKuiF_c3dfkRH23Ii9)');
$("#first").css('background-size','cover');
$("#first").css('background-repeat-y','no-repeat');
$("#first").css('background-position','center center');
最佳答案
试试这个
.progressbar li:before {
width: 30px;
height: 30px;
content: '';
counter-increment: step;
line-height: 27px;
border: 2px solid #7d7d7d;
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: white;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTLB-KSrRyq61FczWe9AUdEdz2GJfs51oNKuiF_c3dfkRH23Ii9);
background-size: cover;
background-repeat-y: no-repeat;
background-position: center center;
/* z-index: 1111; */
}
注意删除多余的样式。
关于html - 如何让选中的图标进入我的进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58914553/
我是一名优秀的程序员,十分优秀!