时间:2020-10-24来源:www.pcxitongcheng.com作者:电脑系统城
效果:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class= "imgs" > <!-- 背景图 --> <div class= "background" > <img :src= "item.voteTime ? imgSrc1:imgSrc2" width= "100%" height= "100%" alt= "" /> </div> <!-- 文字 --> <div class= "front" > <div v-if= "item.voteTime" > <p>非常感谢!</p> <p>您已投票:<span>{{item.voteTime}}</span></p> </div> <p v-else style= "color:#999999" >抱歉,您未完成投票~</p> </div> </div> data() { return { imgSrc 1: require( '@/common/imgs/yitoupiao.png' ), imgSrc 2: require( '@/common/imgs/weiwancheng.png' ), } }, |
外面大的div:设置宽高;
背景图片:1)如果是铺满则宽高都设置100%,2)如果只占一个部分可设置定位。重点:z-index一定要比文字的层级低,否则会被遮住;
文字:根据需求放置位置可定位可不定位,重点z-index设置高于图片;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.imgs { background : #fff ; position : relative ; width : 100% ; height : 250px ; color : #195541 ; .background{ // width : 100% ; // height : 100% ; /**宽高100%是为了图片铺满屏幕 */ // z-index : -1 ; z-index : 1 ; position : absolute ; width : 250px ; height : 100% ; right : 20px ; bottom : 0px ; } .front{ z-index : 2 ; position : absolute ; text-align : center ; top : 39% ; left : 25% ; font-weight : normal ; line-height : 40px ; font-size : 28px ; } } |
开发过程中遇到一个bug:就是我一开始设置的背景图片z-index为-1,导致在h5上,背景图片一会儿能显示一会儿没法显示,后来改为正数1,才解决了这个问题。
2023-03-06
css3鼠标滑过实现动画线条边框2023-03-06
css scroll-snap控制滚动元素的实现2023-03-06
CSS实现多层嵌套列表自动编号的示例代码传统的灰色纯色边框你是不是觉得太难看了?你是否想设计一些精美的边框,例如渐变、圆角、彩色的边框?那你来对地方了,本文将介绍如何用纯CSS就能实现具有渐变和圆角的彩色边框...
2023-03-06
今天给大家带来一个如何实现圆角三角形的方案,这个方案虽然可以实现,但是也是借助拼凑等方式来实现的,假如想一个div来实现圆角三角形,还是比较困难的。之前文章讲了如何实现对话框,里面介绍了三角形的实现方式。今天讲讲...
2023-03-06