# 为分类添加透明背景图片

**URL:** <https://meta.discourse.org/t/adding-transparent-background-image-to-categories/103518>\
**Category:** Support\
**Created:** [2018年十二月5日 02:13 UTC](https://meta.discourse.org/t/adding-transparent-background-image-to-categories/103518 "2018-12-05T02:13:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kankuro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kankuro/32/123065_2.png) [@Kankuro](https://meta.discourse.org/u/Kankuro)\
**Post date:** [2018年十二月5日 02:13 UTC](https://meta.discourse.org/t/adding-transparent-background-image-to-categories/103518/1 "2018-12-05T02:13:47Z")

</div>

How would I go about adding images as the background for categories?

I’ve tried various ways using known tricks such as pseudo elements like `::after` and `::before` to control the transparency of the image without affecting the main content, which I’ve targeted via the `data-category-id` attribute, but this didn’t seem to work. Instead it was covering the full category table and/or creating an empty space at the beginning or end of the category’s row.

I’m wanting to be able to control this via css so that I can replace images easily or change the opacity.

Below is a screenshot of what I’m trying to achieve without the obvious issue of the text fading as well.

> **Screenshot**
>
> ![Screenshot%20at%20Dec%2004%2020-11-32](https://global.discourse-cdn.com/meta/original/3X/a/d/adf480cf1742f2222b546238dae9ed800c9c667a.png)

The main trick I tried using is discussed [here](https://css-tricks.com/snippets/css/transparent-background-images/), but I am open to other options if there are any.

---

<div class="post-metadata">

**Author:** ![Kankuro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kankuro/32/123065_2.png) [@Kankuro](https://meta.discourse.org/u/Kankuro)\
**Post date:** [2018年十二月15日 20:44 UTC](https://meta.discourse.org/t/adding-transparent-background-image-to-categories/103518/2 "2018-12-15T20:44:42Z")

</div>

Anybody have any ideas on how to accomplish this?

---

<div class="post-metadata">

**Author:** ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)\
**Post date:** [2021年十月30日 03:30 UTC](https://meta.discourse.org/t/adding-transparent-background-image-to-categories/103518/3 "2021-10-30T03:30:38Z")

</div>


