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;
}

其他，

使用:after display:block +渐变。
或者甚至以img标记本身为bg，您提供border-image或padding-bottom

背景图像和边框渐变可以共存吗？

2 个答案: