<input name="submit" type="submit" value="Search" class="button search">
是否可以使用background-image:
应用CSS渐变并仍然显示value
属性中包含的文字?
当我添加背景图片时,它会隐藏文字。
任何帮助非常感谢
修改
以下是与标记匹配的计算样式
-webkit-appearance: none;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-border-image: none;
-webkit-box-align: center;
-webkit-box-shadow: rgba(255, 255, 255, 0.701961) 0px 0px 6px 0px inset, rgba(0, 0, 0, 0.0980392) 0px 2px 3px 0px;
-webkit-font-smoothing: antialiased;
-webkit-rtl-ordering: logical;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.30000001192092896s;
-webkit-transition-property: all;
-webkit-transition-timing-function: linear;
-webkit-user-select: text;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: -webkit-linear-gradient(top, #FF8F25 0%, #FF6D00 100%);
background-origin: padding-box;
background-position: 0% 0%;
background-size: auto;
border-bottom-color: #BE4B00;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #BE4B00;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #BE4B00;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #BE4B00;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-style: solid;
border-top-width: 1px;
bottom: 10px;
box-shadow: rgba(255, 255, 255, 0.701961) 0px 0px 6px 0px inset, rgba(0, 0, 0, 0.0980392) 0px 2px 3px 0px;
box-sizing: border-box;
color: white;
cursor: pointer;
display: block;
float: right;
font-family: 'Lucida Grande';
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 800;
height: 26px;
letter-spacing: normal;
line-height: 26px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
max-height: 24px;
outline-color: white;
outline-style: none;
outline-width: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 24px;
position: absolute;
right: 8px;
text-align: center;
text-indent: 0px;
text-shadow: none;
text-transform: uppercase;
vertical-align: baseline;
white-space: pre;
width: 85px;
word-spacing: 0px
解决
填充问题是否会导致文本失败。似乎可以在不影响高度的情况下应用Mac填充中的Chrome,以便将文本向下推出视图。
感谢帮助人员
答案 0 :(得分:3)
CSS
input {
background-color: #D28888;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#690707), to(#D28888));
background: -moz-linear-gradient(top, #690707 0%, #D28888 100%);
border:none; padding:6px 12px; color:#fff; cursor:pointer
}
<强> DEMO 强>
使用background-image
input {
background-image: url(http://alanbooth.net/alap/images/gradient.bmp);
border:none;
padding:6px 12px;
color:#fff;
cursor:pointer
}