6 replies [Last post]
Linton
Linton's picture
Offline
Regular
Vienna
Last seen: 7 years 39 weeks ago
Vienna
Timezone: GMT+2
Joined: 2012-12-10
Posts: 17
Points: 23

I don't know what's going on here! With this CSS there's no background:

.transparent {
	width: 30%;
	font: 70px Helvetica;
	font-weight: bold;
	color: red;
	background: gray;}

...but it appers if you add opacity. The only difference between those two divs is {opacity: .5} Can anybody explain me the reason? Thanks id advance.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 6 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

More??

Try using background-color instead of simply background. It shouldn't make a difference, but it may. You don't say which browsers exhibit this issue.

Failing that, post a link to a test page so we can see this in action.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Linton
Linton's picture
Offline
Regular
Vienna
Last seen: 7 years 39 weeks ago
Vienna
Timezone: GMT+2
Joined: 2012-12-10
Posts: 17
Points: 23

Thanks Gary! I'll try what

Thanks Gary! I'll try what you suggest. The browser is Firefox, and there's no URL, just localhost. Greetings.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 25 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

yes indeed it would be easier

yes indeed it would be easier for us to check it live.
Because there might be more files interfering your css files.
Maybe it does work, but it is striped through because of an other more important CSS file Smile

Check Maximum Webdesign for your online solutions

Linton
Linton's picture
Offline
Regular
Vienna
Last seen: 7 years 39 weeks ago
Vienna
Timezone: GMT+2
Joined: 2012-12-10
Posts: 17
Points: 23

I made this example in

I made this example in JSFiddle. Try and check what happens when you activate opacity!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 6 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Position

This is the type of thing for which positioning was created.

Solution 1:

.caja {
    position: relative;
    }
 
.transparent {
    /*width: 40%;*/
    position: absolute;
    bottom: 30px;
    left: 200px;
    font: 70px Helvetica;
    font-weight: bold;
    color: red;
    background-color: gray;
    }
______________________________________

Negative margins can (but not always) cause problems unless the element has position set at other than static.

Solution 2:

.transparent {
    position: relative;
    width: 40%;
    margin: -200px 0 0 200px;
    font: 70px Helvetica;
    font-weight: bold;
    color: red;
    background: gray;
    /*opacity: .7;*/
    text-align: center;	
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Linton
Linton's picture
Offline
Regular
Vienna
Last seen: 7 years 39 weeks ago
Vienna
Timezone: GMT+2
Joined: 2012-12-10
Posts: 17
Points: 23

Thank you very much, Gary!

Thank you very much, Gary! Smile