微信小程序背景图为什么显示不出来?解决背景图片显示问题

时间: 2018-08-08阅读: 10597标签: 背景

在小程序开发的时候,设置页面的背景,css代码如下:

.page__bd{
    width: 100%;
    height: 220px;
    background: url('../img/images.jpg') no-repeat;
    background-size: 100% 100%;
}

或者换成行内来实现,在调试工具上都是可以显示的,但是扫面上传到手机上却显示不出来,这是为什么呢?


这是由于:background-image 只能用网络url或者base64图片编码 , 本地图片只能用 image标签src属性才行。当然 image标签src属性也可以使用网络url或者base64图片编码。


下面通过 image 标签src属性设置,实现背景图显示

界面结构:

<view class='set-background'>
    <image class='background-image' src='{{item.countryPic}}'></image>
    <view class='background-content'>
        <view class="set-background-avatar" background-size="cover">
            <image class="post-specific-image" src="{{item.picture}}"></image>
        </view>
    </view>
</view>


wxss样式:  

.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;
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/993

background 设置文本框背景图

background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下:background-color 指定元素的背景颜色。background-image 指定元素的背景图像。

详解如何给背景图片加颜色遮罩

前段时间在开发中,遇到需要给背景层加颜色遮罩的项目,现在特定总结一下给背景图层加颜色遮罩的方法。方法一:通过定位叠加(注意层级)

CSS3背景 background-size

设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。auto:默认值,不改变背景图片的原始高度和宽度;contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。

H5移动端点击出现背景蓝色框的解决方案

当我们在移动端给元素添加点击事件时我们会发现点击时元素会默认出现一个背景色框或者高亮显示 ,如何去掉蓝色边框?是用来解决在安卓上的点击出现篮框问题

HTML设定页面可滚定 背景图片固定

有时项目中会遇到背景图固定,页面内容可以滚动,背景不随页面滚动而滚动。就像QQ空间、微博设置自定义背景图的固定选项。其实很容易实现,利用 background-attachment:fixed;

background背景相关之背景颜色

css背景缩写属性可以在一个声明中设置所有的背景属性,css背景图像支持引入多个图像.主要属性有:background-color,background-image,background-repeat

CSS设置background添加背景色两张或多张背景图

我们都知道可以用 CSS 给 background 添加背景色和背景图:那么可以给元素设置两个或者多个背景图吗?答案是可以

CSS3中background-clip背景裁切属性

CSS中的background属性想必大家已经用了无数遍,但是对于CSS3属性background-clip你可能还不太了解,那么今天我们就专门来聊聊这个属性。 clip,英文意为 “裁切,修剪”,所以很显然,background-clip属性肯定与背景裁切有关

CSS box-sizing与background-clip解决背景显示范围的问题

过去在学习CSS的时候,首要任务就是要理解“box model”,因为box model是CSS里头很重要的模型概念,描述了padding、margin、border与content的空间定位

css条纹背景样式、及方格斜纹背景的实现

通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就来详解CSS制作Web页面条纹背景样式的技巧,需要的朋友可以参考下

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!