Inherit color under a background

Question

I want to make dashed button that inherit the background color. Here what I want (but I really want to be able to change the button color without changing the dash background.) Here's the code I have :

body {
  font-family:"Open Sans", sans-serif;
}
.btn {
  display: inline-block;
  padding: 0.5em 0.8em;
  vertical-align: top;
  border-radius: 5px;
  position: relative;
}
.btn.red {
  background-color:#dd2c2c;
  color:#f4f4f4;
}
.btn.blue {
  background-color:#2c84dd;
  color:#f4f4f4;
}
.btn.dash {
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px),
    inherit;
 }

<div class="btn dash red">Red Button</div>
<div class="btn dash blue">Blue Button</div>

With this code I can't see the dashed part. But if I change the "inherit" for a "real" value (like #dd2c2c) it works! How can I do something so it keep is original Background-Color value but with the dashed hover?

Answer 1

Since repeating-linear-gradient creates an image, and is not a color, you can set it using background-image, and the background-color you defined in the 2nd class will take effect as well.

body {
  font-family:"Open Sans", sans-serif;
}
.btn {
  display: inline-block;
  padding: 0.5em 0.8em;
  vertical-align: top;
  border-radius: 5px;
  position: relative;
}
.btn.red {
  background-color:#dd2c2c;
  color:#f4f4f4;
}
.btn.blue {
  background-color:#2c84dd;
  color:#f4f4f4;
}
.btn.dash {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px
  );
 }

<div class="btn dash red">Red Button</div>
<div class="btn dash blue">Blue Button</div>

In your case it didn't work because this is not the correct format for a background:

  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px), /** remove the comma **/
    inherit
 }

This is the correct definition:

  background: inherit repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px);
 }

However, in this case background is "stronger" the background-color, and inherit will replace the background-color you've defined. Since the parent doesn't have a background-color, it won't work as well.