开发小程序的时候,设置页面的背景,用到css代码:
1 2 3 4 5 6 | .page__bd{
width : 100% ;
height : 220px ;
background : url (&# 39 ;../../assets/img/images.jpg&# 39 ;) no-repeat ;
background- size : 100% 100% ;
}
|
在调试工具上是显示的,但是扫面上传到手机上却显示不出来。
这是由于:background-image 只能用网络url或者base64图片编码 , 本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。
解决方法:
下面通过 image 标签src属性设置,实现背景图显示
界面结构:
1 2 3 4 5 6 7 8 | <view class=& #39;set-background'>
<image class=& #39;background-image' src='{{item.countryPic}}'></image>
<view class=& #39;background-content'>
<view class= "set-background-avatar" background-size= "cover" >
<image class= "post-specific-image" src= "{{item.picture}}" ></image>
</view>
</view>
</view>
|
wxss样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .set-background {
display : flex;
flex- direction : column;
align-items: center ;
height : 150px ;
}
.set-background-avatar {
width : 220px ;
height : 150px ;
}
.background-content {
position : absolute ;
z-index : 1 ;
}
.background-image {
width : 225px ;
height : 150px ;
opacity: 0.8 ;
}
.post-specific-image {
width : 215px ;
height : 150px ;
vertical-align : middle ;
}
|
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
暂时没有评论,来抢沙发吧~