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

我想让下面的vue.js组件有一个透明的背景图像。我无法在样式表中使用动态背景图像属性，因此我必须绑定到div框中的style属性。我不能让我的背景图像是透明的。非常感谢您的帮助

<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>

---

当前无法修改伪元素的任何属性：

在模板中，您可以将子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>

然后在样式中修改类 from.news article:：after to.news article background