Вопрос про прозрачность png

Abrak-a-dabrA · December 10, 2011

Здравствуйте. Столкнулся с такой делемой.

Примитивно, код такой...

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<body>
<div id = "main">
<div class = "button">
<img src = "images/catalog_menu/buttons/u2.png" />
</div>
</div>
</body>
</body>
</html>

В CSSке прописан бэкграунд страницы, бэкграунд дива main.

Файлик u2.png должен быть одной из конпок на странице.

У него есть прозрачные пиксели, через которые должен быть виден бэкграунд дива main.

Так вот проблема именно в том что через эти прозрачные пиксели видно фон страницы, а не дива main.

Подскажите пожалуйста новичку, как добиться желаемого результата...?!

Nagibaka · December 13, 2011

css-ку в студию и желательно скрин. Бэкграунд main картинка или просто цвет?

pdbq · December 13, 2011

В CSSке прописан бэкграунд страницы, бэкграунд дива main.
Файлик u2.png должен быть одной из конпок на странице.
У него есть прозрачные пиксели, через которые должен быть виден бэкграунд дива main.
Так вот проблема именно в том что через эти прозрачные пиксели видно фон страницы, а не дива main.
Подскажите пожалуйста новичку, как добиться желаемого результата...?!

<!DOCTYPE>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Тест</title>
</head>
<style>
	body{
		background: CornflowerBlue;
		/*z-index: 1;*/
	}
	#main{
		width: 200px;
		background: MistyRose;
		/*z-index: 10;*/
	}
	.button{
		padding: 10px;
		margin: 15px;
		background: SpringGreen;
		width: 80px;
		height: 30px;
		font: 20px Georgia;
		text-align: center;
		opacity: 0.3;

	}
	.button:hover{
		opacity: 1;

	}
</style>
<body>
	<div id = "main">
		<div class="button">Home</div>
		<div class="button">Contact</div>
		<div class="button">Punkt 1</div>
		<div class="button">Punkt 2</div>
		<div class="button">Punkt 3</div>
		<div class="button">Punkt 4</div>
		<div class="button">Punkt 5</div>
	</div>
</body>
</html>

сделал на примере цветов, без рисунков. но если заменить фоны рисунками ничего не должно поменяться

только для современных браузеров. IE opacity не поддерживает по-моему, там нужны фильтры, на память не помню.

сделал на примере цветов, без рисунков. но если заменить фоны рисунками ничего не должно поменяться


#main{
		width: 200px;
		background: url(mymenu.png);
		/*z-index: 10;*/
}
.button{
		padding: 10px;
		margin: 15px;
		background: url(test.png);
		width: 80px;
		height: 30px;
		font: 20px Georgia;
		text-align: center;
		opacity: 0.3;

}

использовал прозрачный png

Edited December 13, 2011 by pdbq

Sign In

Вопрос про прозрачность png

Question

Abrak-a-dabrA

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Nagibaka

Link to comment

Share on other sites

pdbq

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information