給圖片新增完蒙版後,如何讓字型不受<image>圖片標籤的透明度影響
阿新 • • 發佈:2021-01-06
技術標籤:css
思路: 字型的 div 使用 position:aboslute
<template>
<view class="course">
<view>
<u-tabs :list="Tlist" :is-scroll="false" inactive-color="#666666" active-color="#222222" :current="current" @change="change" >
</u-tabs>
</view>
<view class="wrap">
<view class="cList">
<view class="card">
<image class="img" src="https://wx3.sinaimg.cn/crop.0.44.1305.725/0088iClIly1glph1kgmywj31090mowve.jpg" >
</image>
<view class="desc">
<view class="title">
<text>啊實打實v啊v阿飛青蛙惡氣啊啊撒啊啊啊啊啊</text>
</view>
<view class="bottom">
<view class="level">
<text>k1零基礎</text>
</view>
<view class="time">
<text>k1零基礎</text>
</view>
<view class="people">
<text>k1零基礎</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
Tlist: [{
name: '熱身'
},
{
name: '減脂'
}, {
name: '增肌'
}, {
name: '塑型'
}
]
}
},
methods: {
change(index) {
this.current = index;
}
}
}
</script>
<style lang="scss" scoped>
.course {
.wrap {
margin: 30rpx 20rpx;
.cList {
.card {
background: #000;
.img {
width: 100%;
height: 300rpx;
border-radius: 10rpx;
filter: Alpha(Opacity=60);
opacity: 0.6;
}
.desc {
height: 120rpx;
margin-top: -120rpx;
position:absolute;
.title {
color: #fff;
font-size: 38rpx;
margin-left: 20rpx;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bottom {
display: flex;
margin-top: 10rpx;
font-size: 28rpx;
position:absolute;
color: #f7f7f7;
margin-left: 24rpx;
.level {}
.time {}
.people {}
}
}
}
}
}
}
</style>