img標簽css上方的線性漸變

Question

我有一張卡片，圖像是從 BE 獲取的。 該圖像是卡片的背景圖像。 文本位於此圖像上方。 我需要在圖像上方和文本下方添加漸變。 此外，當用戶將鼠標懸停在卡片上時，漸變顏色應該會改變。 如何使圖像填充整個卡片並在圖像上顯示線性漸變？

 .card { position: relative; margin-left: 25px; min-width: 245px; height: 293px; border-radius: 20px; box-shadow: 0px 4px 12px 1px var(--box-shadow-color); margin-right: 1rem; display: flex; flex-direction: column; align-items: center; align-items: center; justify-content: center; z-index: 2; transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53); transform: scale(1); transition-duration: 300ms; }

 <ul class="carousel" data-target="carousel"> <li class="card" data-target="card"> <img class="background" src="../scr/images/image.png"> <h2> Title <h2> </li> </ul>

Answer 1

 // enter code here

 .card { position: relative; margin-left: 25px; min-width: 245px; height: 293px; border-radius: 20px; box-shadow: 0px 4px 12px 1px var(--box-shadow-color); margin-right: 1rem; display: flex; flex-direction: column; align-items: center; align-items: center; justify-content: center; z-index: 2; transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53); transform: scale(1); transition-duration: 300ms; display:inline-block; } .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; }

 <ul class="carousel" data-target="carousel"> <li class="card" data-target="card"> <div class="pickgradient"> <img src="https://i.imgur.com/5I0iHYf.jpg" /> </div> <h2> Title dfdf </h2> </li> </ul>

Answer 2

嘗試這個。

 body { font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .c-graidient { background: #000; background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background-size: 400% 400%; background-repeat: no-repeat; display: flex; width: 500px; height: 500px; max-width: 100vw; max-height: auto; justify-content: center; align-items: center; color: #fff; position: relative; cursor: pointer; transition: .5s all; } .c-graidient__img { position: absolute; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; background: #000; background-size: cover; width: 100%; height: auto; z-index: 1; opacity: .5; mix-blend-mode: screen; } .c-graidient__title { position: relative; z-index: 10; text-transform: uppercase; letter-spacing: .05em; } .c-graidient:hover { background-position: 100% 100%; } .c-graidient:hover__title { text-shadow: 0 0 20px black; }

 <a class="c-graidient"> <img class="c-graidient__img" src="https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb" /> <h2 class="c-graidient__title">Gradient Hover Effect</h2> </a>

Answer 3

這是一個解決方案，試試這個。

 body { font-family: 'Segoe UI', 'San Francisco', Calibri, Helvetica, Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .c-graidient { background: #000; background: -moz-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #000000 0%, #000000 25%, #1e539e 50%, #ff3083 75%, #7800a8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background-size: 400% 400%; background-repeat: no-repeat; display: flex; width: 500px; height: 500px; max-width: 100vw; max-height: 100vh; justify-content: center; align-items: center; color: #fff; position: relative; cursor: pointer; transition: .5s all; } .c-graidient__img { position: absolute; left: 0; top: 0; background: #000 url(https://images.unsplash.com/photo-1466657718950-8f9346c04f8f?dpr=1&auto=format&fit=crop&w=800&h=800&q=80&cs=tinysrgb) no-repeat center center; background-size: cover; width: 100%; height: 100%; z-index: 1; opacity: .5; mix-blend-mode: screen; } .c-graidient__title { position: relative; z-index: 10; text-transform: uppercase; letter-spacing: .05em; } .c-graidient:hover { background-position: 100% 100%; } .c-graidient:hover__title { text-shadow: 0 0 20px black; }

 <a class="c-graidient"> <div class="c-graidient__img"></div> <h2 class="c-graidient__title">Gradient Hover Effect</h2> </a>