我正在尝试拥有多个背景(1.#fff,2)img 3)渐变背景。但是好像不行
这是我的输出应该是什么样子
代码示例
<div id="send-date" class="transaction-details">
<label for="date">Send on</label>
<input type="date" name="date" id="date"/>
</div><!-- /send-date -->
#send-date input {
background: #fff,
url(../img/icon_calendar_36x36.png),
linear-gradient(btop, #FFFFFF 30%, #BFCBFB 65%, #869CFF 100%);
background-repeat: no-repeat;
background-position: 0% 0%, 96% 50%, 0% 0%;
background-size: cover, 24px, cover;
border: 1px solid #d9d9d9;
text-shadow: none;
}
#send-date input.ui-focus{
background-image: url(../img/icon_calendar_36x36.png);
background-repeat: no-repeat;
background-position: 96% 50%;
background-size: 24px;
border: 1px solid #a18492;
background-color: #d9d9d9;
-moz-box-shadow: inset 2px 2px 8px #AAAAAA;
-webkit-box-shadow: inset 2px 2px 8px #AAAAAA;
box-shadow: inset 2px 2px 8px #AAAAAA;
}
最佳答案
似乎来自this article css3 中的渐变是作为图像生成的,可以用来代替 url(foobar);
所以我的猜测是,它们可能无法很好地处理同一元素中的图像。
尝试用图像在背景渐变上叠加透明。或者反过来。
关于html - 输入框的多个背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13640123/