如何使vue.js组件中的div框的背景图像透明？

Question

我想使以下vue.js组件具有透明的背景图像。 我无法在样式表中使用动态背景图片属性，因此我不得不绑定到div框中的style属性。 的B / C我不能让我的背景图像是透明的。 任何帮助深表感谢。

<template>
  <div :style="{ 'background-image': article_backdrop }" class="news-article">
    <div>{{ title }}</div>
    <div>by {{ author }}</div>
    <div>{{ desc }}</div>
    <div>{{ url_article }}</div>
  </div>
</template>

<script>
export default {
  name: 'news-article',
  props: ['title', 'author', 'url_article', 'desc'],
  computed: {
    article_backdrop: function() {
      return 'url('+ this.url_article + ')';
    }
  }
}
</script>

<style>
  .news-article {
    position: relative;

    height:310px;
    width:310px;

    margin:5px;

    display:inline-block;

    overflow: hidden;
  }

  .news-article::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 310px;
    height: 310px;

    z-index: -1;
    opacity: 0.5;
    content:"";
    /* background-image: url( a url removed for this posting ); */

    background-repeat: no-repeat;

    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
  }
</style>

Answer 1

当前无法修改伪元素的任何属性： https : //forum.vuejs.org/t/style-binding-on-pseudo-selector/5544/4 。

在模板中，您可以将子div添加到新闻文章div中。

<template>
  <div class="news-article">
    <div class="news-article-background" :style="{ 'background-image': article_backdrop }"></div>
    <div>{{ title }}</div>
    <div>by {{ author }}</div>
    <div>{{ desc }}</div>
    <div>{{ url_article }}</div>
  </div>
</template>

然后将样式从.news-article::after为.news-article-background 。