Question

我在这边看到了那个按钮（http://letsgo.gorizia.it/）并且想知道如何实现这样的风格？

是否有一个有用的教程或者你能给我一个提示我应该使用哪个css？

enter image description here

Answer 1

你应该像帖子

中所说的那样使用rgba

.alpha60 {

    /* Fallback for web browsers that don't support RGBa */
    background-color: rgb(0, 0, 0);

    /* RGBa with 0.6 opacity */
    background-color: rgba(0, 0, 0, 0.6);

    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    }

这个网站：

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

这应该会给你你想要的效果。

你可能仍然需要寻找角落的圆角，但现在使用css3虽然不应该找到它。

Also W3schools have a page about it。我知道它不是最可靠的网站，但它对于一些你无法轻易找到的小技巧或技巧都很方便。

Answer 2

使用RGBA作为背景颜色应该可以解决问题：

.ui-btn { background-color: rgba(0,0,0,.25); }

这样的东西应该有用，但是你想要使用颜色（前三个值）和不透明度本身（最后一个值）

Answer 3

当我将alpha60类作为类添加到按钮或锚标签并分配了data-role =按钮时，我无法获得任何效果。我猜想JQM框架会覆盖那个css（但我不知道......如果有人这样做，那么学习它会很有趣。）

对我有用的是ui-btn-up-a（或b或c或你的css主题是这样的）（对于data-theme ='b'的蓝色按钮）

.ui-btn-up-b {
    background: rgba(0, 0, 255, 0.2); /* set the alpha to taste...*/
}

我认为，特别好的是，按钮在悬停时变得不透明并保持其单击（按钮向下）属性，因此用户确实知道他们正在与按钮交互，但是否则他们可以读取任何内容是按钮后面。

当然，关于不执行rgba的浏览器的所有注意事项仍然适用，因此如果您的用户群包含旧版浏览器，您应该使用fallback css使其健壮。

Answer 4

为您的代码添加一个锚标记，并将其HREF设置为您想要的任何内容。然后转到Photoshop并为该按钮生成图像。

如果您尝试在CSS中执行此操作，并设置容纳Anchor的容器的不透明度，则不透明度也会过滤到锚点的文本。没有好的......

您的最终锚标记应如下所示：

<a href="whereever.com"><img src="myButton.png" /></a>

（确保您的图片是.PNG，因为.JPEG不支持透明度）

jquery移动按钮的自定义透明css样式

4 个答案: