Question

动态生成两个按钮（它们不受我的控制）。我想改变这些按钮的图像，但我必须使用CSS，因为我实际上无法更改按钮代码。我假设我需要根据CSS值来做这个，如果可能的话。这是按钮代码：

<button type="submit" class="btn btn-default" name="provider" value="Facebook" title="Log in using your Facebook account.">Facebook</button>

<button type="submit" class="btn btn-default" name="provider" value="Twitter" title="Log in using your Twitter account.">Twitter</button>

我希望实现的两个图像是：Facebook-Login.png和Twitter-Login.png。如果可以使用CSS，有人可以发布代码吗？谢谢，克里斯。

Answer 1

您可以使用这个很棒的属性选择器

在此处详细了解：http://css-tricks.com/attribute-selectors/

CSS

.btn-default[value="Facebook"] {
    background: url("Facebook-Login.png");
}

.btn-default[value="Twitter"] {
    background: url("Twitter-Login.png");
}

您可能需要使用背景而不是背景图像，因为在大多数浏览器中按钮默认使用背景作为渐变。您还需要检查Safari之类的移动浏览器，并且可能需要使用-webkit-appearance: none;来删除默认样式......甚至可能border-radius: 0;删除圆角。

Answer 2

是的，可以用css。使用以下内容：

.btn-default[value="Facebook"]{
    background:url("Facebook-Login.png");
    color: transparent; 
    width: 100px;
    height: 100px;
    line-height: 0; 
    font-size: 0; 
}

.btn-default[value="Twitter"]{
    background:url("Twitter-Login.png");
    color: transparent; 
    width:100px;
    height:100px;
    line-height: 0; 
    font-size: 0; 
}

您需要一个css选择器，并且按钮和值设置正确。由于按钮中有文本，您可能希望隐藏文本，因此设置颜色：透明以隐藏文本而不是图像。

您必须将宽度和高度更改为正确的像素数量。

来源：

how do i hide anchor text without hiding the anchor

http://www.w3schools.com/cssref/sel_attribute_value.asp

祝你好运

Answer 3

js和seri答案非常基础。这段代码是智能代码。我给他们一个悬停菜单图像代码。只是看到它。

.batton {background：＃00F;}

.batton：悬停{背景：URL（ “推 - Login.png”）;}

使用CSS根据其值更改按钮图像

3 个答案:

CSS