Vue/css图片底部遮罩层

版权声明：转载请标明出处。 https://blog.csdn.net/qq_42172829/article/details/83784389

<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>

宽高大小请根据自己项目需求设置！

效果图：