We help IT Professionals succeed at work.

CSS query

Simon Leung
Simon Leung asked
on
#imap a#seoul, #imap a#chungcheong, #imap a#kangwon, #imap a#jeolla {
  display:block;
  width:20px;
  height:20px;
  background:transparent url(./images/hover.png) -100px -100px no-repeat;
  text-decoration:none;
  z-index:20;
  }

 The hover.png is 20x20px.  What is the effect of adding "-100px -100px" in the CSS ?
Comment
Watch Question

View Solution Only

Julian Hansen
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
IF you are referring to the background image it will shift it up and to the left by 100px
Simon Leung

Author

Commented:
One more check, with "transparent", does it make the image "hover" transparent ?
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
No background: transparent refers to the background color of the element - it does not affect the image that is shown.

You can't change the opacity of a background image - you have to fudge it by using a regular image and positioning it behind the content with an opacity value on the image

https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity
https://codepen.io/ncerminara/pen/tncAi/
Simon Leung

Author

Commented:
For the element, are you talking about #imap a#soul, #imap a# ... ?

Thx again.
Julian Hansen
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
I am talking in general.