-4

左側には CSS グラデーションがあり、左側には画像付きのスライダーがあります。右側の画像が下の画像のような形になるように、2つを組み合わせるにはどうすればよいですか?

ここに画像の説明を入力

アップデート

HTML

<div class="row shape-background">

</div>

CSS

.shape-background {
text-align: center;
background: -moz-linear-gradient(125deg, #e20613 25%, white 25%);
background: -webkit-linear-gradient(125deg, #e20613 25%, white 25%);
background: -o-linear-gradient(125deg, #e20613 25%, white 25%);
background: -ms-linear-gradient(125deg, #e20613 25%, white 25%);

問題は、同じ div の右側に別の背景画像を追加すると、線形グラデーションが機能しないことです。

タグ付きのスライダーを作成する必要imgがありますか、それとも背景画像でこのユースケースを実現できますか? background: linear-gradient(125deg, #e20613 25%, 白 25%); }

4

1 に答える 1

1

私のコメントからのデモ：

body {
  margin: auto;
  height: 200px;
  width: 300px;
  background: linear-gradient(125deg, #e20613 25%, transparent 25%), url(http://dummyimage.com/300x200&text=my_image);
  border:solid;
}
html {
display:flex;
height:100%;
background:white;
}

しかし、これはスライダーにはなりません。

HTML に画像を含む CSS スライダーの例

于 2017-09-16T18:18:38.420 に答える