1

下の境界線で充実させたい 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%);
}
4

2 に答える 2

1

border-imagebackground-image互いに影響を与えるべきではありません。

background-sizeすべてのブラウザーがサポートしているわけではなく( http://caniuse.com/#feat=background-img-optsを参照)、さらに少数のブラウザー ( http://caniuse.com/#feat=border-imageborder-imageを参照) がサポートされていることに注意してください。

于 2013-06-07T18:47:40.530 に答える
1

バックグラウンドで設定できます：画像+空の場合の線形グラデーションの
例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
于 2013-06-07T19:16:11.063 に答える