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

Question

我想让下面的 vue.js 组件有一个透明的背景图片。我不能在我的样式表中使用动态背景图像属性，所以我不得不绑定(bind)到 div 框中的样式属性。 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。