dobreprogramy - forum

1/2 przeźroczystości - jak?

Dla specjalistów Webmastering

oggi21 (oggi21) 13 Maj 2015 16:47 #1

Witam wszystkich.

Z góry zaznaczam że moje pojęcie o webmastering’u jest co najmniej słabe, więc proszę o wyrozumiałość :D. Postaram sie wyjaśnić “własnymi” słowami.

Mam stronę w której jako tło jest ustawione zdjęcie, mniej więcej na środku jest ramka (frame). Każda z podstron (wyświetlaja się w ramce) ma tło ustawione na przeźroczystość, problem w tym że nie mogę dobrać koloru czcionki tak żeby napisy były dobrze widoczne na tle zdjęcia. Więc moje pytanie - czy da się w jakiś sposób zmniejszyć przeźroczystość w ramce? coś na wzór mlecznego szkła ?

P.S. Strona jest w html z odrobiną CSS

Z góry dziękuję

fedora24x (fedora24x) 13 Maj 2015 16:58 #2

1/2 przeźroczystości - jak ?

O tak

opacity: 0.5

ewentulnie, można też tak:

filter: alpha(opacity=50);
opacity: 0.5;
-moz-opacity: 0.5;
-o-opacity: 0.5;
-webkit-opacity: 0.5;

oggi21 (oggi21) 13 Maj 2015 18:23 #3

Dziękuje za odpowiedz, ale widzę że chyba żle napisałem. Chodzi mi o to żeby obraz (tło) w ramce było na wpół przeźroczyste, a tekst dobrze widoczny.

manieKMP (manieKMP) 14 Maj 2015 04:36 #4

A w jaki sposób masz tą “pierwotną” przezroczystość dla zdjęcia/tła?

Powyższy sposób, nawet poprawiony/rozbudowany o wydzielenie tekstu z “łapania” prześwitu na niewiele się zda skoro masz już jakoś transparentność ustawioną (sama grafika jest przeźroczysta?).

Może dobrym obejściem byłoby dodać jakiś kolor pod grafikę tła, np. “background-color: rgba(0, 0, 0, 0.5);”.

A co do “opacity”, po odpowiedzi domyślam się, że tak tekst jak i tło należą do tego samego elementu i to właśnie dla niego określasz przeźroczystość. Tło w przypadku tej własności powinno być “wydzielone”, w osobnym kontenerze, niż treść. Jednym ze sposobów jest zastosowanie pseudo-elementu:

Przykład

div {
  width: 200px;
  height: 200px;
  position: relative;
}
div::after {
  content: "";
  background: url(tło.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

W takim przypadku tło siedzi w pseudo-elemencie “after” i to do niego stosuje się “opacity”.

Można też przez html i css dokonać odpowiednich poprawek:

<div>
<img src="tło.jpg" alt="tło">
Jakiś tekst na stronie
</div>

Wtedy przezroczystość stosujesz do tego “img” + css dla odpowiedniego wypozycjonowania grafiki (podobny do tego z zastosowaniem pseudo-elementu, gdzie nie dajesz dwóch pierwszych i ostatniej własności z “after”… no i wysokość/szerokość dla div’a nie jest raczej konieczna).

oggi21 (oggi21) 14 Maj 2015 10:19 #5

Może szybciej bedzie jak dam namiar na stronę, bo jak pisałem w pierwszym poście mam wręcz zerowe pojęcie o pisaniu stron.

adtbouwservice.nl

P.S. Tylko bez heheszek proszę :?

anon61273179 14 Maj 2015 11:35 #6

Proszę bardzo, wkej w jakiś edytor kodu, zapisz jako np. test.html i obejrzyj czy oto Ci chodzi. Masz tu czysty html i cc3.

<!DOCTYPE html>
<html lang="pl">
<head>
<title>test</title>                  
<meta charset="utf-8" />
<style>
	.top {
		width:500px;
		height:366px;
		margin: 0 auto;
		position:relative;
		background-color:#000;
		}
	img {
		width: 100%;
		height:100%;
		opacity:0.5; // sterowanie przeźroczystością 0-1
		}
	p {
		position: absolute;
		top: 100px;
		width: 100%;
		text-align: center;
		color: white;
		font-size: 40px;
		font-weight: bold;
		font-family: Verdana, sans-serif;
		}
</style>	
</head>
<body>
	<div class="top">
	<img src="http://media-cdn.tripadvisor.com/media/photo-s/02/46/90/15/room-mate-oscar.jpg" alt="jakiś obraz z opacity 0.5">
			
	<p>Jakiś text</p>
	</div>
	</div>
</body>
</html>

_r2d2 (#r2d2#) 14 Maj 2015 13:08 #7

Jeśli chcesz uzyskać jednokolorowe, półprzeźroczyste tło to wystarczy, że do stylu danego elementu dodasz:

background-color: rgba(255, 255, 255, 0.5)

W tym przypadku jest to kolor biały o przeźroczystości 50%.

Na twojej stronie musiałbyś zamienić linijkę

<iframe name="InlineFrame1" id="InlineFrame1" style="position:absolute;left:93px;top:178px;width:775px;height:652px;z-index:3;" src="./over.html" frameborder="0">this is frame</iframe>

na

<iframe name="InlineFrame1" id="InlineFrame1" style="background-color: rgba(255, 255, 255, 0.5); position:absolute;left:93px;top:178px;width:775px;height:652px;z-index:3;" src="./over.html" frameborder="0">this is frame</iframe>

manieKMP (manieKMP) 14 Maj 2015 14:06 #8

Według źródła, w wierszu 35 masz taki zapis:

#backgroundimage
{
   height: auto;
   left: 0;
   margin: 0;
   min-height: 100%;
   min-width: 994px;
   padding: 0;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: -1;
}

Dopisanie do tego “opacity: 0.5;” (np. przed klamrą zamykającą), zastosuje przeźroczystość do grafiki, która jest jednak wydzielonym elementem. Z tym że to spowoduje wyblaknięcie tła (nie wiem czy tak chcesz), więc sądzę że lepszym efektem będzie zastosowanie przeźroczystego koloru dla ramki z tekstem, według porady mojego poprzednika (kolor możesz sobie dobrać, zakres RGB masz od 0 do 255 i wypisujesz wartość “background-color” według schematu “rgba(czerwony, zielony, niebieski, przeźroczystość)”… w powyższych postach masz już podane przykłady z czarnym i białym w połowie transparentnym).

anon61273179 15 Maj 2015 09:11 #9

Generalnie najlepiej jest to zrobić jeszcze inaczej.

<div class=“background-black”>

<img src=“jakiś-obrazek.jpg”>

<div class=“tlo”></div>

</div>

przypisać do “background-black” czarne tło i określić wymiary diva i dać pozycjonowanie : relative.

w divie umieścić obrazek dając mu opacity 0.8 i width i height na 100%

następnie dla div “tlo” dać pozycjonowanie “absolutne” i width i height 100% oraz żądane opacity np. 0,5 i kolor background “czarny”.

<!DOCTYPE html>
<html lang="pl">
<head>
	<title>test</title>                  
	<meta charset="utf-8" />
	<style>
		.top {
			width:600px;
			height:478px;
			margin: 0 auto;
			position:relative;
			background-color:#000;
			}
		img {
			width: 100%;
			height:100%;
			opacity:0.9; // sterowanie przeźroczystością 0-1
			transition: all 0.4s ease-in;
			}
		.empty {
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5); // sterowanie przeźroczystością warstwy
		}
		p {
			position: absolute;
			top: 120px;
			width: 100%;
			text-align: center;
			color: white;
			font-size: 60px;
			font-weight: bold;
			font-family: Verdana, sans-serif;
			transition: all 0.4s ease-in;
		}
	</style>	
</head>
	<body>
		<div class="top">
			<img src="http://cdn.homedit.com/wp-content/uploads/2012/01/blue-living-room-design-ideas4.jpg" alt="jakiś obraz z opacity 0.5">
			
			<div class="empty"></div>
			
			<p>Jakiś text</p>
			
			</div>
		</div>
	</body>
</html>

A tak wygląda to na żywo:

oggi21 (oggi21) 21 Maj 2015 19:10 #10

Dziękuje panowie za odpowiedzi.