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;
  }

Answer 1

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)