Geek asks and answers

CSS gradient with RGBA color?

I want to add a transparent black overlay to the button for it: the active state, so when you click on it, it is the same gradient, but with just an overlay, for example. rgba(0,0,0,.3)

As I thought this would work (using webkit in this example):

background:rgba(0,0,0,.3), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);

or without a comma, and the order is canceled ... but nothing appears at all!

I'm not interested in adding another div to act as an overlay to do this, so is there a strictly CSS way for this? I thought maybe this is a pseudo-class :beforeor :after, but I don't know how to use them!

I would really appreciate the answer, it has long distorted me.

+5
source share
3 answers

::after.

CSS position: relative, ::after position: absolute, :

.button {
  position: relative;
}

.button:active::after {
    content: ' ';
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

- Live Fiddle

+2

; rgba , . , :

background: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);

background-image , - .

+3

background-color: black , hex rgba ( 1 ), :active 0.7 ( 30% ) .

.

button {
    background-color: black;
    background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
    background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
}

button:active {
    background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
    background-image: -moz-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);    
}
+1

More articles:


All Articles