CSS按钮/文字帮助请 [英] CSS Buttons / Text Help PLEASE
问题描述
嘿，
我正忙于仅作一些布局，但我为似乎无法解决的问题感到困惑.
基本上我已经在Photoshop中创建了一个按钮，我想将该按钮作为导航栏的背景，即:在其上面有文本的按钮，但是使用1个按钮背景并将文本放在列表之间'' s的< ul< li>''括号.
问题是按钮仅在文本的背景上不能显示整个图像.
如何显示整个图像，而不仅仅是文字后面的图像?
谢谢，
乔什
Hey there,
I am busy trying to just make a few layouts, but I am stumped by an issue I cannot seem to get around.
Basically I have made a button in Photoshop, and I would like to put that button in as the background of the navbar, ie: have a button with text over it, but use 1 button background and just put the text between the list''s ''<ul><li>'' brackets.
What is the issue is that the button doesn''t show the whole image, just over the background of the text.
How do I get it to show the whole image and not just the image behind the text?
Thanx,
Josh
推荐答案
此代码即可完成.没有看到你的，就不能说需要改变什么.
这将绘制2个宽度为400px的按钮，每个按钮3行文本.背景图片是5x5像素+符号.
第一个拉伸图像以覆盖按钮.第二个只是平铺图像.
This code will do it. Without having seen yours, can''t say what needs to be changed.
This draws 2 button 400px wide with 3 lines of text each. The background image is a 5x5 pixel + symbol.
The first stretches the image to cover the button. The second simply tiles the image.
<!DOCTYPE html>
<html>
<head>
<style>
button
{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2NkQID/QCYjiAsmoABFEMRBAThVYmgHAAhoBQWHhfyYAAAAAElFTkSuQmCC);
border-width: 4px;
width: 400px;
}
#btn1
{
background-size: 100% 100%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<button id='btn1'>This is<br>some text<br>Line 3</button>
<button id='btn2'>This is<br>some text<br>Line 3</button>
</body>
</html>
这篇关于CSS按钮/文字帮助请的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
