如何将图像添加到自定义 CSS 按钮答案

【问题标题】：How to add an image to a custom CSS button如何将图像添加到自定义 CSS 按钮
【发布时间】：2014-04-06 16:04:59
【问题描述】：

我有以下按钮的 HTML 代码：

<button class="button" style="width: 95%;">PHYSICIANS</button>

这里是由 CSS3 自定义的：

button {
    border: 1px solid rgba(0,0,0,0.3);
    background: #eee;
    color: #515151;
    font-size: 24px;
    font-weight: 700;
    padding: 21px 34px;
    text-decoration: none;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.21, rgb(203,203,203)), color-stop(0.58, rgb(227,226,226)));
    background: -moz-linear-gradient(center bottom, rgb(203,203,203) 21%, rgb(227,226,226) 58%);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3) /* glass edge */, inset 0 1px 0 0 rgba(255,255,255,0.5) /* top highlight */, inset 0 -3px 0 0 rgba(0,0,0,0.5) /* bottom shadow */;
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 1px 0 0 rgba(255,255,255,0.5), inset 0 -3px 0 0 rgba(0,0,0,0.5);
    text-shadow: 0 1px rgba(255,255,255,0.6);
}
button::-moz-focus-inner, a.button::-moz-focus-inner {
    padding:0;
    border:0;
}
button:hover, a.button:hover {
    background: #cbcbcb;
    cursor: pointer;
}
button:active, a.button:active {
    background: #ccc;
    padding: 22px 34px 20px;
    -moz-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0 0 5px rgba(255,255,255,0.3), inset 0 -1px 0 0 rgba(255,255,255,0.5), inset 0 2px 5px 0 rgba(0,0,0,0.2);
    text-shadow: none;
}

其中显示以下按钮：

如何修改上述代码，以便添加缩略图。像这样的：

默认图像尺寸为 260X190，但我想将其放大以适合按钮内。

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用伪元素 :before 来执行此操作。

查看我制作的这个工作演示：http://jsfiddle.net/A7UsX/1/

button:before {
    content: " ";
    display: inline-block;
    background: url("http://www.wdc.com/Global/images/icons/icon_supporthelp.gif") no-repeat;
    height: 30px;
    width: 50px;
}

我制作了一个红色背景来向您展示我所做的。将background 更改为您想要的图像，并将height 和width 更改为您的喜好。

【讨论】：

谢谢...我会继续测试一下。
也许我做错了什么但我没有看到图像：/ responsinator.com/…
OOOOPS... 这是一个内部服务器网站：/ 抱歉！这是我所拥有的粘贴箱。在 DEV 工具上，我可以看到样式表，还可以看到正在导入的图像，但没有显示：pastebin.com/KCZxmuKM
它正在工作。检查我的编辑。我通过添加图像让您更清楚。
奇怪，我用了你的图片，没问题。文本不是垂直居中的。我怎样才能做到这一点？我认为我导入图像的方式有问题？

【解决方案2】：

你可以使用:before 伪元素。

button:before{content: ' '; display:inline-block;  position:absolute; content:url(http://lorempixel.com/25/25); }

我建议您使用 SVG 图像，而不是使用 jpg 或 png 格式。所以在这种情况下，您可以使用background-image 调用图像并给出定位。

button:before { content:''; display:inline-block; height:1em; width:1em; 
background-image:url('images/image.svg'); background-size:contain; background-repeat:no-repeat;  }

您可以在此处查看正在运行的 Demo。 http://jsbin.com/damujidi/1/edit

【讨论】：

检查其他解决方案.. 这样您也可以移动图像。请替换 svg`` with jpg 或 png 你使用什么格式..
SVG 比 PNG/JPG 有什么优势？
SVG 是可扩展的格式。它们比 png 或 JPG 更清晰。其他好处是，如果你缩放它们，它不会损失质量
也许我做错了什么但我没有看到图像：/ responsinator.com/…
即使我看不到页面..此显示消息来“此页面无法显示”

【解决方案3】：

您可以添加一个<i>，如引导程序中常用的 [ref1] [ref2]。

<button class="button">
    <i class="btnbg"></i>PHYSICIANS
</button>

CSS：

.btnbg {
    background-image: url('http://i.stack.imgur.com/QgIOj.png');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
    width: 70px;
}

.button {
    line-height: 35px;
    vertical-align: middle;
}

see jsFiddle

【讨论】：