CODEWITHSUNDEEP
htmlcssvue.js
Charles Saag
Charles Saag

Reputation: 631

How do I make the background image of a div box in a vue.js component transparent?

I want to make the following vue.js component have a transparent background image. I can't use a dynamic background-image property in my stylesheet so I'm forced to bind to the style attribute in the div box. B/c of this I can't get my background image to be transparent. Any help is much appreciated.

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

Upvotes: 0

Views: 3095

Answers (1)

Wing-On Yuen
Wing-On Yuen

Reputation: 667

It is not currently possible to modify any attribute of a pseudo-element: https://forum.vuejs.org/t/style-binding-on-pseudo-selector/5544/4.

In your template, you could add a child div to your news-article 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>

And you modify the class in your styles from .news-article::after to .news-article-background.

Upvotes: 1

Related Questions