Is it possible to make a text button so that the color depends on the background?

Question

css

Hello.
Given: a normal WP site. Some theme from the free ones, pictures are scrolled and a button is in the center. Nothing special.
Is it possible to make the color of the text (well, or the button) depend on the image? Orange picture - red button, black picture - gray button.

Answer 1

It's much easier to make the button neutral. For example: jsfiddle

Answer 2

It is possible, but difficult.
It’s easier to get around this with a design — a backing on top of the photo so that it brightens / darkens the area under the button.

Answer 3

Hello.
Somehow I came across something like this , but I didn’t get my hands on how it works.

Answer 4

Is it possible to make the color of the text (well, or the button) depend on the image? Orange picture - red button, black picture - gray button.

Take a look at Color Thief - a simple but very handy contraption. You give her a picture - she gives you the main color (or a palette of colors, but in this case it is not needed). Having received the color, you can use it as the color of the button / text (if necessary, you can increase / decrease the saturation or brightness - this is no longer a problem). If you've been to the uWebDesign site , you may have noticed that they use this library for the color bars with the titles of the posts.

Answer 5

How many pictures and how often should they be changed?
If there are few pictures and rarely change, then it’s easier to hardcode like

switch ($imageNum)
{
      case 1:
            $buttonClass = "buttonWhite";
     break;

     case 2:
            $buttonClass = "buttonBlack";
     break;
    ...
}

If there are a lot of pictures and they change often, then modify the image upload module through the admin, add custom fields for each, such as background color, text color, etc.