如何使用HTML和CSS实现跨浏览器的图像反射？ [英] How do I achieve cross-browser image reflection with HTML and CSS?
本文介绍了如何使用HTML和CSS实现跨浏览器的图像反射？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好。我需要在mvc应用程序中使用反射显示我的图像。我希望这是跨浏览器。我看过一些例子，但我发现只有一个接近。该图像是几个员工中的一个，它将根据记录选择更改进行更改。所以它必须是动态的。不幸的是，我找到的样本引用了CSS中的图像。我需要的是将png文件的引用放在HTML代码中，这样CSS就可以简单地格式化从images文件夹中检索并加载到HTML中的任何图像。下面分别是我的css和html代码：
ul，li
{
padding：0;
保证金：0;
list-style：none;
}
li
{
display：inline-block;
保证金：8px;
text-align：center;
cursor：default;
}
li strong
{
font：bold 12px / 36px Arial，Sans-serif;
颜色：＃404040;
}
.gf-icon-huge
{
position：relative;
宽度：141px;
身高：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：;
仓位：绝对;
top：100％;
z-index：-1;
宽度：继承;
身高：继承;
display：block;
}
.gf-icon-reflection ::
之前{
背景：继承;
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 ::
之后{
背景：-moz-linear-gradient（
90deg，
#fff 60％，
rgba（255,255,255,0.8）100％
）;
背景：-webkit-linear-gradient（
90deg，＃ff 60％，
rgba（255,255,255,0.8）100％
）;
背景：-o-linear-gradient（
90deg，＃ff 60％，
rgba（255,255,255,0.8）100％
）;
背景：-ms-线性渐变（
90deg，
#fff 60％，
rgba（255,255,255,0.8）100％
）;
背景：线性渐变（
90deg，＃ff 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％;
仓位：绝对;
z-index：-1;
宽度：继承;
身高：继承;
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 =stylesheethref =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> 公共云< / li>
< li>< div class =gf-icon-huge gf-icon-notifications gf-icon-reflection>< div><！ - / - >< / div> ;< / DIV> 通知< /锂>
< li>< div class =gf-icon-huge gf-icon-search gf-icon-reflection>< div><！ - / - >< / div> ;< / DIV> 搜索< /锂>
< / ul>
< / div>
< / body>
< / html>
我尝试过：
我试图将图像文件作为参数从HTML传递到CSS而没有运气。
解决方案
从中删除背景图像CSS，并通过内联样式设置：
。 gf-icon-huge {
position ： relative;
width ： 141px;
height ： 141px;
background-repeat ： no-repeat;
/ * 已添加到m ake图像填充可用空间* /
background-size ： < span class =code-keyword>封面;
background-position ： center center;
- moz-border-radius ： 100％;
- webkit-border-radius ： 100％;
border- radius ： 100％;
}
< div class = gf-icon-huge gf-icon-reflection style < span class =code-keyword> = background-image：url（'....'）; >
< div >
<！ - / - >
< / div >
< / div >
Hello. I have a need to show my images with reflection in an mvc application. I want this to be cross- browser. I have looked at a number of examples but I found only one that came close. The image is that of one of several employees which will change on record selection change. So it has to be dynamic. Unfortunately, the sample I found has the reference to the image in the CSS. What I need is for the reference to the png file be placed in the HTML code, so that the CSS will simply format whatever image is retrieved from the images folder and loaded in the HTML. Below are my css and html codes respectively:
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>
What I have tried:
I have tried to pass the image file as a parameter from HTML to CSS without luck.
解决方案
Remove the background image from the CSS, and set it via an inline style:
.gf-icon-huge { position: relative; width: 141px; height: 141px; background-repeat: no-repeat; /* Added to make the image fill the available space */ background-size: cover; background-position: center center; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; }
<div class="gf-icon-huge gf-icon-reflection" style="background-image:url('....');"> <div> <!-- / --> </div> </div>
这篇关于如何使用HTML和CSS实现跨浏览器的图像反射？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
