关闭

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

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

在小程序开发的时候,设置页面的背景,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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

10 个独特的 CSS 背景视觉效果

这几年的web设计中,大背景的设计变得越来越流行。特别是在现在大屏大行其道的情况下,设计师在设计中越来越多的使用大分辨率的背景图来填充屏幕,这样更能制造独特的视觉效果,能更好的传达他们想要向用户传达的内容。

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

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

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

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

CSS3制作文字背景图

文字带上渐变色,或者说让文字透出图片。这些效果 CSS 属性也可以完成。 使用 mix-blend-mode 能够轻易实现,我们只需要构造出黑色文字,白色底色的文字 div ,叠加上图片,再运用 mix-blend-mode 即可,简单原理如下:

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

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

Css背景定位

同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色,1.在CSS中有一个叫做background-position:属性,就是专门用来控制背景图片的位置2.格式:background-position:值1 值2;

如何使用CSS Paint API动态创建与分辨率无关的可变背景

现代Web应用对图像的需求量很大,它们占据网络下载的大部分字节。通过优化它们,你可以更好地利用它们的性能。如果你碰巧使用几何图形作为背景图像,有一个替代方案

css设置全屏背景图,background-size 属性

在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法,以图片bg.jpg为例,最简单,最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size

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

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

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

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

点击更多...

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