Vue/css圖片底部遮罩層
阿新 • • 發佈:2018-11-17
<template> <div > <div v-for="item in list"> <div class="thediv" @click="onClickVideo(item.Video)"> <img src="http://p2.music.126.net/CQDGeibcfkSHbbyjapNBmw==/109951163430714435.jpg" /> <span>{{item.description}}</span> </div> </div> </div> </template> <script> export default{ name:'pet_video', data(){ return{ list:[ {Video:"https://www.youtube.com/watch?v=DYj9kmyaEWE",description:"沒啥好描述的"}, {Video:"https://www.youtube.com/watch?v=idPjYbTV034",description:"沒啥好描述的"}, {Video:"https://www.youtube.com/watch?v=Af8zrc3i-vs",description:"沒啥好描述的"}, {Video:"https://www.youtube.com/watch?v=9UQeQcaOg68",description:"沒啥好描述的"}, ] } }, methods:{ } } </script> <style scoped="true"> .thediv { width: 280px; position: relative; float: left; margin: 0 15px; margin-top: 30px; } img { width: 280px; height: 250px; border-radius: 8px; } .thediv span { width: 280px; display: block; padding-left: 10px; line-height: 50px; background-color: rgba(255,255,255,0.2); /*background-color: #333;*/ opacity: 0.9; position: absolute; bottom: 0; color: black; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style>
寬高大小請根據自己專案需求設定!
效果圖: