Søg
Avatar billede twistedup Nybegynder
17. august 2005 - 16:06 Der er 23 kommentarer og
1 løsning

Background-color og opacity

Hej eksperter,

Jeg sidder og roder med en baggrundsfarve jeg godt vil have fadet lidt.

Er det overhovedet muligt at fade en baggrundsfarve med CSS, fordi jeg kan absolut ikke få til at virke med filter:alpha(opactity=..)
Avatar billede roenving Novice
17. august 2005 - 16:11 #1
Nej, du kan ikke nøjes med at fade baggrundsfarven, det vil fade hele elementet !-)

-- hvis du vil fade en baggrund, skal du lægge flere elementer ovenpå hinanden, hvor det bageste så kan gives en opacity:

<div style="position:relative;">
  <img src="minBaggrund.jpg" style="filter:alpha(opacity=0);-moz-opacity:0.5;opacity:0.5;width:150px;height:150px;background:#f00;">
  <div style="position:absolute;top:0;width:150px;height:150px;">&nbsp;</div>
</div>
Avatar billede roenving Novice
17. august 2005 - 16:12 #2
Hov ...

-- der skulle selvfølgelig stå opacity=50, så det var ens med Gecko og css3-propertyerne !o]
Avatar billede twistedup Nybegynder
17. august 2005 - 16:24 #3
Det virker ikke med mit billede..?
Avatar billede twistedup Nybegynder
17. august 2005 - 16:33 #4
Er det muligt at gøre det igennem en class?
Avatar billede roenving Novice
17. august 2005 - 16:42 #5
Det virker glimrende hos mig ...

-- og ja, selvfølgelig kan du sætte style-properties med en class i et stylesheet !-)

-- hrm, den havde jeg ikke oplevet før, men:

<div style="position:relative;">
  <img src="../billede.jpg" style="filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;width:150px;height:150px;background:#f00;">
  <div style="position:absolute;top:0;left:0;width:150px;height:150px;text-align:center:font-weight:900;font-size:20px;">Hej</div>
</div>
Avatar billede twistedup Nybegynder
17. august 2005 - 16:52 #6
Det er måske fordi jeg sidder med et content management system. Det er ofte vanskeligheder med at implementere forskellige scripts.

Nu virker det!

Hvordan får jeg billede til at være uendeligt i baggrundet, så jeg ikke skal angive højde og bredde?

Kan du evt. gøre noget ved den lille farve det kort ligger over det hele ide t siden loader?

Ska' nok forhøje pointene lidt med dit arbejde :)
Avatar billede roenving Novice
17. august 2005 - 16:55 #7
-- jeg satte en background ind på billedet, for at undgå at finde et billede i første omgang, så det kan du bare fjerne !-)

Uendeligt i baggrunden, hvad mener du ?-)
Avatar billede twistedup Nybegynder
17. august 2005 - 17:13 #8
Det er jo meningen det skal være en baggrund.

Som det er nu kommer scrollbaren frem, hvis jeg definerer en bestemt højde?? Står der kun 2 linier på siden er det lidt ærgeligt at se på en scrollbar ;)
Avatar billede twistedup Nybegynder
17. august 2005 - 17:16 #9
Jeg mener en bagrrund som dækker mere end billedets størrelse på siden, hvis man ikke definerer width og height.

Dvs. at den fylder hele siden på 400x200px eksempelvis, selvom billedet kun er 50x50px
Avatar billede roenving Novice
17. august 2005 - 17:16 #10
Uden background på billedet:

<img src="../billede.jpg" style="filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;width:150px;height:150px;">

-- hvis du vil have det som baggrund, ændrer du det bare til et div-tag:

<div style="filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;width:150px;height:150px;background:url(../billede.jpg);"> &nbsp;</div>
Avatar billede roenving Novice
17. august 2005 - 17:21 #11
Hov, så kan du f.eks. sætte størrelsen som relativ, men så skal du huske at have det hele vejen igennem hierarkiet:

<style type="text/css">
html,body{border:0;padding:0;height:100%;}
.site{position:relative;width:680px;height:100%;margin:0 auto;}
.background{filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;height:100%;background:url(../billede.jpg);}
.indhold{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center:font-weight:900;font-size:20px;}
</style>

-- og så

<div class="site">
  <div class="background">&nbsp;</div>
  <div class="indhold">
    Dit indhold
  </div>
</div>
Avatar billede twistedup Nybegynder
17. august 2005 - 17:29 #12
...hvorfor kan jeg ikke bare bruge en repeat? Kan ikke få den til at virke med den property!
Avatar billede roenving Novice
17. august 2005 - 17:31 #13
?-)

-- hvor repeat ...
Avatar billede twistedup Nybegynder
17. august 2005 - 17:32 #14
bruge background-repeat: repeat ..? I under style i <div>-koden
Avatar billede roenving Novice
17. august 2005 - 17:34 #15
F.eks.

.background{filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;height:100%;background:url(../billede.jpg) no-repeat;}
Avatar billede roenving Novice
17. august 2005 - 17:37 #16
Som et fuldt validt dokument, så også IE gør det rigtigt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Tomt dokument</title>
<style type="text/css">
html,body{margin:0;border:0;padding:0;height:100%;}
.site{position:relative;width:680px;height:100%;margin:0 auto;}
.baggrund{filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;height:100%;background:url(../billede.jpg) no-repeat;}
.indhold{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center:font-weight:900;font-size:20px;}
</style>
</head>
<body>
<div class="site">
  <div class="baggrund">&nbsp;</div>
  <div class="indhold">
    Dit indhold
  </div>
</div>
</body>
</htnml>
Avatar billede twistedup Nybegynder
17. august 2005 - 17:38 #17
du skriver no-repeat?? den skal netop repeate jo..?
Avatar billede twistedup Nybegynder
17. august 2005 - 17:40 #18
jeg vender tilbage til det i morgen, så får du point. Skal lige have en pause fra det her...
Avatar billede roenving Novice
17. august 2005 - 17:42 #19
Det gør den default, så jeg tænkte at det skulle være det ...

-- men du kan bare fjerne no-repeat eller ændre den til repeat !-)
Avatar billede twistedup Nybegynder
18. august 2005 - 11:52 #20
Nu fandt jeg endelig ud af det!

Jeg brugte følgende af koden du sendte:

<html>
<head>
<style type="text/css">

<style type="text/css">
.baggrund{filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;height:100%;background:url(../media/img_siumainbg.gif);}
</style>
</head>
<body>
<div class="baggrund"><div style="position:absolute;width:100%;height:100%;"></div></div>
</body>
</html>

Tak for hjælpen roenving!
Avatar billede twistedup Nybegynder
18. august 2005 - 11:57 #21
Nu forstår jeg så ikke helt, at scrollbaren kommer frem på en side kun med overskrift?
Avatar billede roenving Novice
18. august 2005 - 12:06 #22
Fordi der er en margin eller en padding på enten documentElement eller body, og for at være sikker på at det virker ens i alle browsere skal du også have doctype-tingen med, så:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html,body{margin:0;border:0;padding:0;height:100%;}
.baggrund{filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;height:100%;background:url(../media/img_siumainbg.gif);}
</style>
</head>
<body>
<div class="baggrund"><div style="position:absolute;width:100%;height:100%;"></div></div>
</body>
</html>

-- og du får det bedste resultat (bl.a. muligheden for at centrere tingen !-), hvis du bruger ideen med en container omkring, som er positioneret relativt !-)
Avatar billede twistedup Nybegynder
23. august 2005 - 14:52 #23
tak for hjælpen roenvig, det virker som det skal :)
Avatar billede roenving Novice
23. august 2005 - 15:26 #24
?-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 12:15 morf bilede Af knuldefar1942 i Fri debat
07/0822:13 Gemme største værdi Af Lemming@privat.dk i Excel
07/0821:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »