- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在将切换开关与图像对齐时遇到问题,这是我需要的确切描述。 http://jsfiddle.net/9M4gc/ ,我的切换开关正在相应地工作,但我只需要使用 CSS3 来对齐图像上的切换开关。查看下面的图片。
这是我页面的当前外观:
这是我想要的:
意思是我只想像上图一样将拨动开关放在图像上。到目前为止,这是我的代码:
HTML:
<div class="back" id="toggle"><br/>
<img src="http://i1159.photobucket.com/albums/p637/Apulo_Cosmas/btn_push01c2x.png"/>
<label for="enjoy_web"></label>
<div class="slideThree">
<input type="checkbox" value="None" id="slideThree" name="check" />
<label for="slideThree"></label>
</div>
</div>
CSS:
body{
background:#088A08;
margin:auto;
}
input[id=slideThree] {
visibility: hidden;
}
/* SLIDE THREE */
.slideThree {
width: 120px;
height: 45px;
background: #0101DF;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
position: relative;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
.slideThree:after {
content: 'OFF';
font: 19px/26px Arial, sans-serif;
color: #fff;
position: absolute;
right: 10px;
z-index: 0;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}
.slideThree:before {
content: 'ON';
font: 19px/26px Arial, sans-serif;
color: #fff;
position: absolute;
left: 10px;
z-index: 0;
font-weight: bold;
}
.slideThree label {
display: block;
width: 50px;
height: 40px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .10s ease;
cursor: pointer;
position: absolute;
top: 3px;
left: 3px;
z-index: 1;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
.slideThree input[type=checkbox]:checked + label {
left: 68px;
}
可在 http://jsfiddle.net/9M4gc/ 查看工作演示提前感谢您的帮助。
最佳答案
为什么不将图像设置为背景,并将切换开关置于父 div 中?
这是一个工作示例:http://jsfiddle.net/529Lk/
关于html - 图像上的 CSS3、CSS 对齐切换开关,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11553199/
我想要 angularJs 中的一个按钮,当我按下它时会调用一个函数,当我再次按下它时它会执行另一个功能,比如 ON-OFF 开关。 我有这个: 我会在单击一次时调用另一个函数。 最佳答案 您可
我有一个相当大的 switch 语句(或同样大的 if 语句),我想在 Doxygen 中记录一些方法,可能是调用者图,或者可能是某种流程图格式。 我怎样才能做到这一点? 谢谢 ! 最佳答案 通常 d
public int[] Level1Items(int floor) { switch (floor) { case 0: case 1:
我有一些R代码看起来基本上是这样的: compute.quantiles <- function(mu, type) { ## 'mu' and 'type' are vectors of the
嗨,我正在尝试处理 ajax json 响应 这是我的代码 success: function (j) { switch(true) { case (j.cho
我在尝试在 Javascript 中进行切换时遇到问题,当切换激活时,根据情况,程序将显示许多新按钮,您可以单击这些按钮并播放声音。 这是我的 HTML 和 Javascript,带有第一组按钮: f
static double rSetzen(){ double r; System.out.println("Sind sie männlich oder weiblich?");
作为我用 Haskell 编写的迷你解释器的一部分,我正在编写一个执行以下操作的函数:如果是 eval (App e1 e2) ,我想递归评估 e1 ( eval e1 ),将结果设置为 v1 .然后
对于C语言,我知道我很接近,但是对于输入的任何字符,打印输出都是“辅音”。我的 switch case 语句有什么问题。我需要 if 语句吗? #include #include int main
我有以下方法,它以类的类型作为参数: public void test(Type proType){ } 我目前有一个很大的 if else 看起来像: if(proType == typeof(Cl
我正在编写带有开关功能的代码。我希望我的默认代码打印“错误”并使程序停止运行。我应该在默认值末尾添加 return 1; 吗? 如果是这样,这样对吗? switch (course3) { c
VB.NET,但 C# 也可以。 我有一个 MustInherit 基类和 170 个基于它的继承类。为什么这么多?因为每个继承的类在 Sub New() 中做了不同的事情。继承的类型不添加任何新属性
在我的开关中,我希望案例从 0 变为 (number_of_cases-1),而无需自己编写数字。因此,如果我在中间删除一个 case block ,则以下 case 将重新编号(减 1),以便再次从
我想在我的应用中使用精确的 Material 开关。正是谷歌设计指南中的那些。 https://www.google.com/design/spec/components/selection-cont
有没有比我使用的更好的方法来实现切换/开关。它有效,但对我来说似乎很笨拙。 var foo = true; $(document).on("click","$element",function(){
我尝试将全局变量与 switch 语句一起使用,但变量的值没有改变。也许是范围问题? 我需要一个 switch 语句来逐一循环遍历每种情况,但每次我在控制台中查看时,“i”变量都会重置为 1。 为什么
我最近在一个网站上工作,在本地主机上一切正常,但是当我将它移到服务器上时,更改 div 函数开始加载怪异,我不知道为什么。当您循环浏览投资组合按钮和联系人按钮时,该错误会更加明显。 该网站仅针对 Fi
我一直在开发一个使用 switch() 函数的项目,如下所示: switch (selectedMenu) { case 1: switch (selectedIndex) {
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Variable declaration in c# switch statement 我一直想知道: 当我
我有一个奇怪的问题,我似乎无法解决。我有相当复杂的代码,但我已经简化了它,问题仍然存在。 请参阅以下内容: 'correct'); switch (true) { case empty($m
我是一名优秀的程序员,十分优秀!