v-viewer使用，点击图片后会弹出一个层, 如何修改这个层的背景色为黑色呢？

[JoeBlackzqq]

一个uni-app程序，使用了v-viewer组件，图片查看功能都已完成，点击一张图片时，会把这个图片单独显示在一个层(div)上, 这个层使用了背景0.5的透明度，现在想修改背景色为黑色，不知如何操作了！

因为uni-app不支持使用jquery那样的方法，所以我无法通过样式查找对应元素再修改其css！特来求教!

[JoeBlackzqq]

补充下:

main.js:

import Vue from "vue";
import App from "./App.vue";
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.config.productionTip = false;

Vue.use(Viewer, {
	defaultOptions: {
		button: false,
		navbar: false,
		title: false,
		toolbar: true,
	}
})

new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <viewer class="viewer">
      <img
        v-for="src in images"
        :src="src"
        class="img"
        @click="setBackground"
      />
    </viewer>
  </div>
</template>

<script>
export default {
	name: "app",
	data: function() {
		return {
			images: [
				"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552047027245&di=4ecd3bf2dc5107e29d1b99a27a07bf5e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201603%2F28%2F20160328083921_UwFKv.jpeg",
				"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552047029443&di=7be9b406b4888c108382091fbf68fc26&imgtype=0&src=http%3A%2F%2Fimage.uczzd.cn%2F5587990758045711187.jpeg%3Fid%3D0%26from%3Dexport",
				"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552047031777&di=576b34656b24933c5dc5ad986ae38f2d&imgtype=0&src=http%3A%2F%2Fimages5.fanpop.com%2Fimage%2Fphotos%2F29700000%2FGoku-goku-29767653-1024-768.jpg",
				"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552047036248&di=1fd27ca4ad7d39477f94f668f59bfc5f&imgtype=0&src=http%3A%2F%2Fp3.zbjimg.com%2Ftask%2F2009-07%2F15%2F112093%2Fxtdrpiqd.jpg"
			]
		};
	},
	methods: {
		setBackground() {}
	}
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.viewer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	border: 1px solid red;
}

.img {
  width: 150px;
  height: 150px;
  margin: 5px;
}
</style>

运行时，点击图片前：


点击其中一张图片后:

[qq_31987601]

在项目下找到 node_modules ,接着找viewerjs，dist，找到viewer.css。打开后搜索 viewer-backdrop 类，找到后修改rbga，修改如下：
.viewer-backdrop {
background-color: rgba(0, 0, 0, 1);
}

另外，vue 项目是可以在浏览器中通过元素定位修改样式的，不要给自己偷懒找借口。

[JoeBlackzqq]

引用 2 楼 qq_31987601 的回复:

在项目下找到 node_modules ,接着找viewerjs，dist，找到viewer.css。打开后搜索 viewer-backdrop 类，找到后修改rbga，修改如下：
.viewer-backdrop {
background-color: rgba(0, 0, 0, 1);
}

另外，vue 项目是可以在浏览器中通过元素定位修改样式的，不要给自己偷懒找借口。

找到了引起这个样式的地方, 写了个同名的样式, 修改了值, OK了