CODEWITHSUNDEEP
javascripthtmlcss
Ωmega
Ωmega

Reputation: 43683

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

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

Upvotes: 2

Views: 4219

Answers (2)

Bergi
Bergi

Reputation: 664936

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)

Upvotes: 2

methodofaction
methodofaction

Reputation: 72415

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/

Upvotes: 1

Related Questions