Element (background-image) opacity, but no border opacity

Question

I know how to do border opacity, how to do background image opacity, but I would like to have an element without border opacity, having backround-image opacity on. I don't want to modify image in image editor, so I am looking for opacity set by CSS. Possible?

In my CSS below I want to modify "disabled" status with sharp no-opacity border. Please advice...

Example of use: this fiddle

button style:

  div.button, div.button:hover
  {
    background: none;
    border: 2px solid #6C7B8B;
    border-radius: 8px;
    clear: none;
    color: transparent;
    cursor: pointer;
    display: inline-block;
    filter: alpha(opacity=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    float: none;
    height: 24px;
    margin-bottom: 0px;
    margin-left: 3px;
    margin-right: 0px;
    margin-top: 7px;
    opacity: 1;
    -moz-opacity: 1;
    outline: none;
    overflow: hidden;
    padding: none;
    vertical-align: top;
    width: 24px;
  }

click effect:

  div.button:active
  {
    left: 1px;
    position: relative;
    top: 1px;
  }

extra style for status DISABLED:

  div.disabled, div.disabled:hover
  {
    cursor: default;
    filter: alpha(opacity=50);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity: 0.50;
    -moz-opacity: 0.50;
  }

  div.disabled:active
  {
    left: 0px;
    position: relative;
    top: 0px;
  }

extra style for status ON:

  div.on, div.on:hover
  {
    border: 2px solid #007FFF;
  }

To give border opacity you can use rgba({values}) in the color section of border. You can also give transparent(in same section) to make border disappear. — ppsreejith, Jul 11 '12 at 23:44
Why do you want opacity, not just lower the color? You have a button with `color: transparent; background: none;`, btw - can you show your page to us? — Bergi, Jul 11 '12 at 23:45
Why do you use div.button instead of real buttons, which even have a disabled attribute? — Bergi, Jul 11 '12 at 23:47
@Bergi - I have updated the question with example fiddle (three buttons: normal, on, disabled). I want "disabled" button to have same border as normal button. I use `div.button` because I want my exact style as you can see in my CSS. — Ωmega, Jul 11 '12 at 23:54
@ppsreejith - I had no luck with that - see fiddle link in my updated question - if you can, please update that fiddle with solution. — Ωmega, Jul 11 '12 at 23:56

score 2 · Accepted Answer · edited May 23 '17 at 11:56

You're just in the same situation as CSS: set background image with opacity? - you want to have a transparent background, but non-transparent content (to whom the border counts).

So as in CSS3 there is nothing such a background-image-opacity, you can only build a transparent image or position two elements over each other, the lower containing the image (as suggested by the answers there).

But in your case it would be enough to shade the image. This could for example been done by using transparent image from the beginning, but change the underlaying background-color. Or you'd use

<div class="button" title="Zoom!"><img src="icon.gif" alt="glasses" /></div>

with

div.button.disabled img { opacity: .5; }

which makes more sense semantically, too. You should get away from those inline styles.

(updated fiddle)

score 1 · Answer 2 · answered Jul 12 '12 at 00:20

1

You could dim the background image through semi transparent pseudo-element placed on top of the button, but not the border:

enter image description here

  div.button {
    ...
    position: relative;
  }

  div.disabled:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    background: rgba(255,255,255,0.7);
    border-radius: 6px;
  }

Please note that I suggest this just because I like challenges, I still think Bergi's answer is the "right way" of doing it.

http://jsfiddle.net/NECyg/

answered Jul 12 '12 at 00:20

methodofaction

70,885
21
151
164

I would expect pseudo-element placed on top of the button also disable `onclick` button event, which I would love to, but for some reason it does not (http://jsfiddle.net/2jNze/) - is that part doable with pseudo-element as well? Please advice. – Ωmega Jul 12 '12 at 14:38
Pseudo-elements don't obstruct events, so you'll have to do something like `$(element).click(function(){if {$(this).hasClass('.disabled'){return false;}}})` – methodofaction Jul 12 '12 at 16:00

Element (background-image) opacity, but no border opacity

2 Answers2