web-dev-qa-db-ja.com

CSS-画像の両側の線形グラデーション透明度

tl; dr

画像の左側と右側に-webkit-linear-gradientを使用してCSSの画像に透明度を追加する方法はありますか？

ロングバージョン

透明度を追加したい画像があります-純粋なCSSで-PhotoshopやGimpなどの画像エディターの使用を避けて、その両側に-webkit-linear-gradientを使用しようとしましたが、rgba（）関数を使用して定義しています色が止まる。

したがって、このスニペット

height: 200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));

これを行います：

enter image description here

この例では、rgba（）の最後のパラメーターで色の透明度を定義しています。ここまでは順調ですね。 rightを-webkit-linear-gradientに入れると、上の画像は逆になります。 （あなたは言わない？！）

どういうわけか2つをマージして、両側が透明になるグラデーションを作成します。グラデーションのみではありません。画像付き。

また、box-shadowとradial-gradientを使って回避しようとしましたが、理解できませんでした。

CSSのみを使用して画像の左側と右側に透明度を追加する方法はありますか？

編集：

例： enter image description here

csstransparencylinear-gradients
14
balintpekker

ラッパーdivを使用してから、カラーストップを使用できます。

div {
  position: relative;
  display: inline-block;
}
div:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* IE10+ */
  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
  /* W3C */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
  /* IE6-9 */
}
<div>
  <img src="http://placekitten.com/g/300/300" alt="" />
</div>

リソース

20
jbutler483
.image {
  position: relative;
}

.image::after {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to right, currentColor 5%, transparent 30%);
  }

.image::before {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    display: block;
    background-image: linear-gradient(to left, currentColor 5%, transparent 30%);
  }
<div class="image">
  <img src="http://placekitten.com/800/400"/>
</div>

これを実行するために私が見つけた1つの方法は、疑似クラスを使用して、それらを互いの上にスタックすることです。画像コンテナが相対的に配置されており、問題なく機能することを確認してください（例を参照）。

0
JimRush