css를 사용한 img 태그 위의 그라데이션

css를 사용한 img 태그 위의 그라데이션

구배를 배치하고 싶다.<img>태그를 붙입니다.src태그의 속성은 angular-item입니다.예를 들어 다음과 같습니다.<img src={{value.angitem.image}}>

css 클래스를 만들려고 했습니다.

.pickgradient {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
}

그리고.

<img src={{value.angitem.image}} class="pickgradient ">

효과가 없어요.어떻게 해야 하나?

z-index 사용 시:

컨테이너를 사용하여 그 컨테이너에 그라데이션(gradation)을 붙일 수 있습니다.그런 다음 음의 z 인덱스를 사용하여 이미지를 그라데이션 뒤에 배치합니다.

.pickgradient {
  display:inline-block;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

img{
  position:relative;
  z-index:-1;
  display:block;
  height:200px; width:auto;
}

<div class="pickgradient">
  <img src="http://i.imgur.com/HDssntn.jpg" />
</div>

---

유사 요소의 경우:

코멘트에 따라서, 그라데이션과 절대 포지셔닝에 의사 요소를 사용해, 그라데이션이 이미지 위에 놓일 수도 있습니다.

.pickgradient{
  position:relative;
  display:inline-block;
}
.pickgradient:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  display:inline-block;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

img{
  display:block;
  height:200px;width:auto;
}

<div class="pickgradient">
  <img src="http://i.imgur.com/HDssntn.jpg" />
</div>

2020년에는 마스크 이미지가 잘 작동할 수 있습니다.최신 브라우저(현재 많은 브라우저에서는 IE, -webkit- 접두사가 아님)에서 작동합니다.https://caniuse.com/ #css=css-filename

img {
   height: 200px;
   width: auto;
   mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
   -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}

   <img src="http://i.imgur.com/HDssntn.jpg" />

다음 설정을 권장합니다.background-color:black;컨테이너에 저장한 후class img{opacity:0.4}그러면 같은 효과를 얻을 수 있습니다.

backgroundImage:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img_url))

슬라이드의 예:

.Slide {
    position: relative;
    border: 1px solid blue;
    min-width: 100%;
    height: 100%;
    transition: 0.5s;
    background-color: rgb(0, 0, 0);
}

.Slide img{
    position: relative;
    border: 1px solid blue;
    min-width: 100%;
    height: 100%;
    transition: 0.5s;
    opacity: 0.4;
}

배치해 보다div해당 이미지 위에 그라데이션이 이미지 대신 div에 배치됩니다.

언급URL : https://stackoverflow.com/questions/23935758/gradient-over-img-tag-using-css