html background 透明度,background设置透明度兼容性

最近在做一个弹窗，大概思路是这样的，当弹窗想展示是图片时，放图片的div为透明(前提是上传的这张图是png格式的)，当弹窗为公告显示文字时，内容底部将有背景图。没想象中的顺利，安卓和ios兼容问题搞的差点崩溃...

安卓写法

background: rgba(0, 0, 0, 0);

ios写法

background: transparent;

html

:class="{'opacity': $store.state.opacity}"

round

:close-on-click-overlay="false"

:style="{'background':isShow==0? aa:'#fff url('+require('../assets/img/home/gonggao_bg.png')+') left top no-repeat'}"

v-model="popup"

data

data() {

return {

//isShow为0时为图片弹窗

isShow: '',

//安卓为1

mobile:'',

ios:'transparent !important',

android:'rgba(0,0,0,0) !important',

aa:'',

bb:''

};

让页面渲染时候调用方法

mounted() {

this.$nextTick(() => {

//是否获取图片

this.getPhoto();

this.useMobile();

});

根据手机不同对样式设不同的值

methods: {

useMobile() {

let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {

// alert("isiOS"+isiOS)

this.mobile=2;

//Ios

} else if (/(Android)/i.test(navigator.userAgent)) {

// alert("isAndroid"+isAndroid)

//Android终端

this.mobile=1;

}

getPhoto: function() {

let popType = this.$store.state.popType;

if (popType == "pic") {

this.isShow = 0;

if(this.mobile==1){

this.aa=this.android

}else{

this.aa=this.ios

}

}else{

this.isShow = 1;

}

html background 透明度,background设置透明度兼容性相关推荐

css如何设置透明度？设置透明度的两种方法（代码实例）
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
java设置输入框透明度,屏幕透明度，,设置透明度（这是窗体本身
屏幕透明度,,设置透明度(这是窗体本身设置透明度(这是窗体本身的透明度,非背景) 设置黑暗度设置背景模糊以设置对dialog对话框同样有效设置透明度(这是窗体本身的透明度,非背景)1 Windo ...
html如何设置文本框透明度,div设置透明度
#a{ background:#FFCC33; filter:alpha(opacity:0); width: 300px; heig#a{background:#FFCC33; filter:alp ...
html背景颜色透明度hex,CSS背景颜色设置透明度的两种方法（8位hex和rgba）
目录一. 6位HEX转RGBA 二.8位HEX 在写微信小程序的时候,有个需求是按背景颜色 background-color要设透明度0.85,让背景图片 background-image透一点出来 ...
PHP设置文本框背景透明度,如何给background-image设置透明度？
如题,现在是没法改图片本身的透明度,该图片以 background-image 写在 css 里,不知道有没有办法给他设置透明度?div{ position: relative; } div:afte ...
网页定位(position属性、相对定位、绝对定位、固定定位、z-index、设置透明度)
position属性 static:默认值,没有定位 relative:相对定位,相对于自己原来的位置进行偏移 absolute:绝对定位,以它最近一个已经定位的祖先元素为基准进行偏移 fixed:固 ...
css背景透明(css背景透明度怎么设置)
CSS 背景颜色透明怎么弄外层div: background-color: rgba(255, 255, 255, 0.9); /* 白色并且阿尔法通道是0.9*/ 内层div: backgroun ...
css如何利用transparent属性设置透明度？transparent属性绘制各种三角形
想到用css设置元素透明度,大家的第一反应会是:用Opacity属性来设置透明度,其实在css中还有其他设置透明度的方法.本章给大家介绍用transparent属性设置透明度,以及用transpare ...
html设置表单透明度,css利用transparent属性设置透明度的方法
css利用transparent属性设置透明度的方法发布时间:2020-09-14 13:44:46 来源:亿速云阅读:188 作者:小新这篇文章主要介绍css利用transparent属性设置 ...
css 背景效果_css透明度怎么设置？三种css图片透明度的设置方法
css透明度的设置在网页的设计中是经常需要用到的,有时为了设计出的网页更加的美观,会对图片进行透明化处理,这样网页上面的内容就不会看不见,有的网页因为图片作为背景,也会更加美观,那么,css中的透明度 ...

html background 透明度,background设置透明度兼容性

html background 透明度,background设置透明度兼容性相关推荐

最新文章

热门文章