html - 背景图片和边框渐变可以共存吗？

Question

我有一个 div，我想用底部边框来丰富它。经典的效果很好，但是渐变的根本不起作用：

div.bg
{
    background-image: url('http://...');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    border-bottom-width:10px;
    border-bottom-image:linear-gradient(to left, #FFFFFF 0%, #00A3EF 100%);
}

Answer 1

border-image且background-image不应相互影响。

请注意，并非所有浏览器都支持background-size（请参阅http://caniuse.com/#feat=background-img-opts），甚至更少的支持border-image（请参阅http://caniuse.com/#feat=border-image）。

Answer 2

您可以在后台设置：图像+线性渐变
示例为空div：

div {
background:
  linear-gradient(90deg, #FFFFFF 0%, #00A3EF 100%) no-repeat bottom,
  url(http://lorempixel.com/640/480/) no-repeat;
padding-bottom:10px;
background-size: 100% 10px, contain;
height: 480px;
width: 640px;
}

别的，

1. 使用:after display:block+渐变。
2. 甚至作为 img 标签本身中的 bg 给你border-image或padding-bottom