Absolutely! You can easily add gradient backgrounds without overriding your existing background images, and solve that annoying repetitive inline image bloat at the same time. Here’s how to do it right:

1. Layer Gradients and Background Images Together #

CSS allows multiple background layers in a single background declaration—just separate them with commas. The order matters: the first value is the top layer, the last is the bottom layer.

If you want the gradient to overlay your background image (for example, a darkening effect), put the gradient first. If you want the gradient to sit behind the image, reverse the order.

Here’s a cross-browser compatible example:

.your-element {
  /* Old WebKit browsers (Safari < 6.1, Chrome < 26) */
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('your-image-source');
  /* Old Firefox (Firefox < 16) */
  background: -moz-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('your-image-source');
  /* Old Opera (Opera < 12.1) */
  background: -o-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('your-image-source');
  /* Standard CSS (all modern browsers) */
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('your-image-source');

  /* Optional: Set shared background properties (applies to all layers) */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

Pro tip: Use rgba() for your gradient colors so the background image shows through—solid colors would block it entirely.

2. Fix Repetitive Inline Background Images #

If you’re copying inline base64 image data across multiple elements, you’re wasting space and making maintenance a nightmare. Instead, store the inline image in a CSS custom property (variable) so you can reuse it everywhere:

Step 1: Define the variable globally #

:root {
  /* Replace with your actual inline image data */
  --inline-bg: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==');
}

Step 2: Reuse the variable in your elements #

.element-one {
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), var(--inline-bg);
  /* Add cross-browser gradient prefixes using the same variable */
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), var(--inline-bg);
}

.element-two {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--inline-bg);
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--inline-bg);
}

For super old browser support (IE11 and below): #

If you need to support browsers that don’t recognize CSS variables, use a preprocessor like Sass or Less to define a variable instead. The preprocessor will compile the variable into the actual inline data during build time, so old browsers see the full inline string directly.

内容的提问来源于stack exchange，提问作者DelphianBoy