1

我在进行网页设计时遇到了一个问题，尝试将半透明 (RGBa) 边框颜色应用于元素似乎无法正常工作。你会得到一个不透明的边框。这是一个 CSS 示例：

header > div form {
    width: 229px;
    background: url('img/connexion.png') no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: center;
}

header > div form > p:first-child {
    color: #1B2E83;
    font-size: 16px;
    font-weight: bold;
    margin-top: 31px;
}

header > div form input[type=email], header > div form input[type=text], header > div form input[type=password] {
    width: 140px;
    height: 20px;
    border: 2px solid rgba(0,0,0,0.14);
}

预期行为：灰色透明边框。我在同一页面上的另一个元素上尝试过它，它工作得很好。

实际行为：灰色边框。就这些。RGBa 值似乎在某种程度上被解释为给定的颜色是黑色，结果是灰色，但它根本不透明。

测试：Firefox 8.0、Chrome 16.0.912.63

由于它发生在 Webkit 和 Gecko 上，也许我做错了什么......我试图删除容器上的 position: absolute ，以删除背景图像（这是一个具有透明度的 PNG）......没有任何改变。

4

2 回答 2

5

问题似乎是一个input元素是一个被替换的元素（因为它是由底层操作系统提供/呈现的，而不是浏览器本身；虽然我不知道操作系统不能rgba()正确处理颜色）。

这不是一个理想的解决方案，但是将input元素包装在另一个元素中，并为包装元素的边框设置样式：

<form method="post">
    <p>Espace connexion</p>
    <div>
    <input type="email" name="mail" placeholder="Votre adresse e-mail" required="required" value="" />
    </div>
    <div>
    <input type="password" name="password" placeholder="Votre mot de passe" required="required" pattern=".{4,}" title="4 caractères minimum" />
    </div>
    <input type="submit" value="OK" />
</form>

使用 CSS：

form div, div#test {
    width: 140px;
    height: 20px;
    border: 20px solid rgba(255,0,0,0.5);
}

form div input {
    width: 100%; /* to stop the inputs being wider than the containg div */
    box-sizing: border-box; /* to include the border as part of the width */
}

更新了 JS 小提琴。

于 2011-12-20T12:39:11.493 回答
0

你可以加：

input {
  background-clip: padding-box;
  border: 2px solid rgba(0,0,0,0.14);
}

用于输入中的工作 rgba。

https://css-tricks.com/transparent-borders-with-background-clip/

于 2015-12-02T14:27:38.453 回答