Как добиться кроссбраузерного отражения изображений с помощью HTML и CSS?
Привет. У меня есть потребность показать свои изображения с отражением в приложении mvc. Я хочу, чтобы это было кроссбраузерно. Я просмотрел несколько примеров, но нашел только один, который подошел близко. Образ - это образ одного из нескольких сотрудников, который изменится при изменении выбора записи. Поэтому она должна быть динамичной. К сожалению, образец, который я нашел, имеет ссылку на изображение в CSS. Мне нужно, чтобы ссылка на png-файл была помещена в HTML-код, так что CSS просто отформатирует любое изображение, полученное из папки images и загруженное в HTML. Вот мой CSS и HTML кодов соответственно:
ul, li
{
padding: 0;
margin: 0;
list-style: none;
}
li
{
display: inline-block;
margin: 8px;
text-align: center;
cursor: default;
}
li strong
{
font: bold 12px/36px Arial, Sans-serif;
color: #404040;
}
.gf-icon-huge
{
position: relative;
width: 141px;
height: 141px;
background: url("icons-huge.png") no-repeat;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
.gf-icon-reflection::before,
.gf-icon-reflection::after
{
content: "";
position: absolute;
top: 100%;
z-index: -1;
width: inherit;
height: inherit;
display: block;
}
.gf-icon-reflection::before
{
background: inherit;
filter: flipv(); /* IE<10 */
-moz-transform: scaley(-1);
-webkit-transform: scaley(-1);
-o-transform: scaley(-1);
-ms-transform: scaley(-1);
transform: scaley(-1);
}
.gf-icon-reflection::after
{
background: -moz-linear-gradient(
90deg,
#fff 60%,
rgba(255, 255, 255, 0.8) 100%
);
background: -webkit-linear-gradient(
90deg, #fff 60%,
rgba(255, 255, 255, 0.8) 100%
);
background: -o-linear-gradient(
90deg, #fff 60%,
rgba(255, 255, 255, 0.8) 100%
);
background: -ms-linear-gradient(
90deg,
#fff 60%,
rgba(255, 255, 255, 0.8) 100%
);
background: linear-gradient(
90deg, #fff 60%,
rgba(255, 255, 255, 0.8) 100%
);
}
.gf-icon-huge.gf-icon-public-cloud
{
background-position: -161px 0;
}
.gf-icon-huge.gf-icon-notifications
{
background-position: -10px 0;
}
.gf-icon-huge.gf-icon-search
{
background-position: -312px 0;
}
.gf-icon-huge div
{
display: none;
}
/* IE<10 */
.gf-icon-huge div
{
display: block\9;
}
.gf-icon-huge div
{
top: 100%;
position: absolute;
z-index: -1;
width: inherit;
height: inherit;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#ffffff); /* alpha, red, green, blue */
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Crossbrowser CSS3 Reflections</title>
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<h1>Crossbrowser CSS3 Reflections</h1>
<div>
<ul>
<li><div class="gf-icon-huge gf-icon-public-cloud gf-icon-reflection"><div><!-- / --></div></div>public cloud</li>
<li><div class="gf-icon-huge gf-icon-notifications gf-icon-reflection"><div><!-- / --></div></div>notifications</li>
<li><div class="gf-icon-huge gf-icon-search gf-icon-reflection"><div><!-- / --></div></div>search</li>
</ul>
</div>
</body>
</html>
Что я уже пробовал:
Я попытался передать файл изображения в качестве параметра из HTML в CSS, но безуспешно.