Legge tekst på bilde med opacity-banner i artikkeloversikt

**TSP** · 24. august 2008

Hei! Har søkt rundt på nettet og prøvd å finne frem til noe, men hittil har jeg kun funnet guider som tar for seg gjennomsiktighet når bildene er definert som background i css. Har ikke funnet ut hvordan dette skal gjøres om det dreier seg om .

Det jeg prøver på er å ha et artikkelbilde på en side med et "banner" oppå et artikkelbilde, det skal være gjennomsiktig og oppå der igjen skal det være tekst.

Dere kan se ganske lett hva jeg mener om dere titter på den øverste artikkelen på http://www.itavisen.no .

Forkortet meg ned til noe der, men virket som om den løsningen Itavisen.no bruker er ganske tungvint og jeg lurer på om det finnes enklere løsninger som ikke krever over 60 linjer med kode i CSS.

HTML-utdrag fra Itavisen.no

(noen biter av html-koden er tatt bort, men ikke noe veldig relevant

<div id="topStories"><div class="topStory" id="pos_1"><input type="hidden" name="pos_1_id" id="pos_1_id" value="783639" />
  <div class="topStory_negativ" id="toppsaken">
  <input type="hidden" name="topStoryStyle" id="topStoryStyle" value="1" />
	<a href="" title=""><img class="storyIMG" src="http://www.media.allerinternett.no/php/obj.phpi?o=2704998&w=514&h=289&ee=1219506109" alt="" /></a>	
	<div class="storyHeading">
		<div class="inner">
			<h1><a href="">Spillbransjens mest rocka</a></h1>
			<div class="lead"><span class="leadText">SNIKTITT: Vi rocker ut med Harmonix og Rock Band 2.</span></div>
		</div>
	</div>
	<div class="textDoubling">
		<div class="inner">
			<h1 id="title_783639"><a href="/sak/783639/Spillbransjens_mest_rocka/" title="Klikk for å lese hele saken">Spillbransjens mest rocka</a></h1>
			<div class="lead" id="lead_783639"><span class="leadText negative" id="leadText_783639" onclick="top.location.href='/sak/783639/Spillbransjens_mest_rocka/';">SNIKTITT: Vi rocker ut med Harmonix og Rock Band 2.</span></div>
		</div>
	</div>
</div>

CSS-utdrag fra Itavisen.no

(noen biter av css-koden som hører med til stylingen av artikkelen på Itavisen.no er tatt bort, men ikke noe veldig relevant)

#topStories {
 width:450px;
 overflow: hidden;
}


/* ARTIKKELVISNING */
.lead {
 cursor: pointer;
}

/* TOPPSAKER */




/* NEGATIV-VARIANT */
.topStory_negativ { 
color: white; 
position: relative; 
left: 12px;
top: 5px;
width: 514px; 
height: 289px;
clear: left; 
cursor: pointer; 
}

.topStory_negativ .storyHeading { 
width: 450px; 
background-color: #fff;
position: absolute;
bottom: 20px;
left: 0px;
opacity: 0.50;
-moz-opacity: 0.50;
}

.topStory_negativ .storyHeading .inner {
 visibility: hidden;
background-color: inherit;
margin: 4px;
margin-left: 8px;
margin-right: 8px;	
margin-bottom: 8px;
}

.topStory_negativ .textDoubling {
width: 420px; 
position: absolute;
bottom: 20px;
left: 0px;
background-color: transparent;
}

.topStory_negativ .textDoubling .inner {
background-color: inherit;
margin: 4px;
margin-left: 8px;
margin-right: 8px;
margin-bottom: 8px;
}

Noen forslag til gode og enkle løsninger her?

Wackamole · 25. august 2008

Google is your friend: Opacity css html

http://www.w3schools.com/css/css_image_transparency.asp

**TSP** · 25. august 2008

... men hittil har jeg kun funnet guider som tar for seg gjennomsiktighet når bildene er definert som background i css. Har ikke funnet ut hvordan dette skal gjøres om det dreier seg om .

Fikk rett og slett ikke noe ut av den siden der fordi den tok for seg background i css ... I de to første er det ikke tekst på og i det tredje er det altså definert i css.

Det var faktisk en av sidene jeg var på før jeg lagde denne tråden

Endret 25. august 2008 av TSP

PHPdude · 25. august 2008

Den ordentlige løsningen er å bruke RGBA-farger, som lar en sette en gjennomsiktig bakgrunnsfarge kun for det ene element, men dette støttes kun av nyere Safari og Firefox hvilket blir for snevert. Så jeg tror et gjennomsiktig bakgrunnbilde er den beste løsningen, komplett eksempel:

<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style>
body {
padding:10px 5% 0px 5%;
}
#news .story {
display:inline-block;
border:2px #ccc solid;
margin:5px;
position:relative;
}
#news .story .info {
position:absolute;
bottom:15px;
left:15px;
overflow:auto;
background-image:url(black-semitransparent.png);
}
#news .story .info h2,
#news .story .info p
{
color:white;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<div id="news">
 <div class="story">
<img src="http://www.media.allerinternett.no/php/obj.phpi?o=2705006&w=514&h=289&ee=1219524279" />
<div class="info">
  <h2>En fargerik prins</h2>
  <p>SNKTITT: Vi har fått sett nærmere på flotte, nye Prince of Persia</p>
</div>
 </div>
</div>
</body>
</html>

Vedlegget inneholder refererte "black-semitransparent.png"

ITavisen sin løsning klarer seg uten det i utgangspunktet unødvendige bakgrunnbilde, men bruker til gjengjeld en usedvanlig fæl framgangsmåte som blant annet inkluderer å legge inn teksten dobbelt opp.

Usikker på hva du at du mener med "bildene er definert som background i css" og om løsningen min også rammes, isåfall tror jeg du bør revurdere, for alternativet er fort veldig tungvindt viss du må forholde deg til alle nettleserne - og vi snakker jo om et bilde som ikke trenger å være større enn 1x1px.

**TSP** · 25. august 2008

Mener at artikkelbildet ikke kan være definert i CSS Siden det tross alt er flere artikler. Men slik som black-semitransparent.png går helt fint.

Problemet her er at hvis du ser det her i IE 7, ser det ikke spesielt pent ut.

Jeg har lagt ut på en side nå, så vi sammen kan se litt på det. I Opera 9.5 og Firefox er det nå nært opptil slik jeg vil det skal se ut. Men i ditt eksempel blir det en feil i IE 7 og mine forandringer gjør det hele bare enda verre. Vurderer å droppe IE 7 støtte her

http://tsp.tiplr.com/tester/

Originalt forslag fra deg er øverst.

PHPdude · 26. august 2008

Nå vet ikke jeg hvordan IE7 viser siden, men IE7 støtter vertfall ikke display:inline-block. Jeg brukte den for at ikke boksen skulle fylle opp i bredden, da bildet kun har en spesifikk statisk bredde.

Tror ikke det er noe annet som ødelegger og at IE7 faller tilbake på display:block og at bildet dermed ikke fyller rammen og at teksten brer seg utover bildet.

**TSP** · 26. august 2008

Her er hvertfall et bilde til deg for at du skal se hvordan det ser ut i IE.

Eksempel 1

Ramme fyller hele bredden ut.

Eksempel 2 (mer slik jeg vil ha det i FF og Opera)

Ramme fyller hele bredden ut og opacitybanner kommer til høyre for det hele.

Du ser jo selv at Itavisen.no kjører på med en tungvint kode og jeg vil som sagt finne noe lettere.

Har forresten hørt at Ajax kan løse noen problemer man kan få når man koder(?) Har uantsett tenkt å ha en Ajax-effekt på det. (ingress skal "lastes inn" når man holder musen over område med bilde og tittel. Ser kult ut i hodet mitt hvertfall, vi får nå se hvordan det blir til slutt :wee: )

**TSP** · 4. september 2008

Hei, fant ut av det.

Her kan dere se:

http://tsp.tiplr.com/eksempler/

Fant ut at Gamer.no på sin Games Convention side hadde det jeg var ute etter. Strippet ned koden og kom frem til løsningen. Tusen tusen takk til Gamer.no sine kodere får vi vel si! Dere kan se koden selvfølgelig ved å titte i kildekoden på siden der, men kan legge inn her i spoilere senere når jeg har tid og, evt. korte ned enda mer, så enda mer urelevant går bort.

Har forresten en "spin-off-tråd" her: https://www.diskusjon.no/index.php?showtopic=1003803&hl=

Logg inn

Legge tekst på bilde med opacity-banner i artikkeloversikt

Anbefalte innlegg

TSP

Lenke til kommentar

Videoannonse

Wackamole

Lenke til kommentar

TSP

Lenke til kommentar

PHPdude

Lenke til kommentar

TSP

Lenke til kommentar

PHPdude

Lenke til kommentar

TSP

Lenke til kommentar

TSP

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer