html - Background runs behind button -


background behind button should block background. button can change width.

enter image description here

enter image description here

how can realise this?

this might done in lot of ways, here's first idea:

use mask this:

mask

  1. make sure background-image covers whole button
  2. insert 2 white divs above background-image: left & right of button
  3. insert mask above buttons background

due transparent area (indicated texture) able display border-like part of background image while rest of stays invisible, because overlapped.

i illustrated result of instructions above result


Comments

Popular posts from this blog

html5 - What is breaking my page when printing? -

html - Unable to style the color of bullets in a list -

c# - must be a non-abstract type with a public parameterless constructor in redis -