Пропадает прозрачность

stars · December 1, 2011

Изначальная задача сделать полупрозрачный текст под углом (и не было бы проблем если бы какие то чудики все не забили на IE 6-8)

Вот как оно выглядит по идеи:

<!DOCTYPE html>
<html lang="ru">
	<head>
		<title>test</title>
		<meta charset="UTF-8">
		<style type="text/css">
			#mytext {
				width:150px;
				margin:200px auto;
				opacity:0.3;
				-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
				-moz-opacity: 0.3;
				-khtml-opacity: 0.3;
				filter: alpha(opacity=20);
				transform:rotate(-25deg);
				-moz-transform:rotate(-25deg);
				-webkit-transform:rotate(-25deg);
				-o-transform:rotate(-25deg);
				-ms-transform:rotate(-25deg);
				filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.985', M12='-0.174', M21='0.174', M22='0.985', SizingMethod="auto expand", enabled=true);
			}
		</style>
	</head>
	<body>
		<div id="mytext">Проба проба проба</div>
	</body>
</html>

НО, в IE не работает прозрачность, если убрать строчку filter:progid:DXImageTransform.Microsoft.Matrix то прозрачность будет работать но соответственно текст не повернется...

Замечу, что да svg\canvas и иже с ними решает проблему или php с графической библиотекой, но условие данного задания состоит в том чтобы был только html + css... (можно рассмотреть случай с JS)

Резюмирую, у меня не получается одновременно повернуть текст и сделать его прозрачным в IE 6-8, есть идеи как это осуществить?

SelenIT · December 1, 2011

Так вы два раза назначаете filter, затирая первый. Плюс в IE9 фильтры плохо дружат с нативной прозрачностью. Вот как-то так не решает? Правда, старый IEшный баг с рендерингом шрифтов с фильтрами без фона вылез...

stars · December 1, 2011

да наверное так, хотя это не алё... Но все же спасибо!!!

Sign In

Пропадает прозрачность

Question

stars

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

stars

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information