我有一个图像,我想在页面加载后淡入.
我已将该图像的css设置为零不透明度.
然后我使用js淡化图像(将不透明度增加到1).这发生在页面加载的大约一秒钟内.
我可以想象,不透明度为零的元素不会增加SEO的价值.不过我知道Google抓取工具可以在某种程度上读取JS.这是否意味着它会理解它在一秒钟后可见并且像任何常规图像一样索引？
如果我在页面加载时使用'display:none'替换不透明度,并在一秒钟后用JS替换'display:block',那么SEO将如何受到影响？
任何见解都会受到赞赏,欢呼!
我有一个<div>黑色背景,包含一个白色<h1>元素.<div>使用以下css结合IE的方法,我的不透明度为.4.
opacity: .4;
filter: alpha(opacity=40);
这使我<div>和<h1>具有40%的透明度,但我想的H1拥有全透明(白色).如何通过相同的浏览器支持实现此目的？提前致谢!
PS我会使用,background:rgba(0,0,0,.4);但这不是IE支持的东西.
$("html").fadeTo("slow",0.5);
OR
$("html").css({ 'opacity':'0.5' });
为什么这些脚本中的任何一个都会使页面变白？我需要它变得更暗,没有更白,通常这是不透明度,但不是这里...
如何使用jquery为我的html设置黑色不透明度？
Internet Explorer 9现在支持不透明度规则和过滤规则.
这会导致问题.见例子
HTML
<!DOCTYPE html>
<html>
<head>
<title>To standard or not to standard</title>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style type="text/css">
form, table { opacity: 0; filter: alpha(opacity=0); }
</style>
</head>
<body>
<form action="javascript:">
Now you see me...
<table><tr><td>Now you don't!</td></tr></table>
</form>
<script>
$('form, table').animate({
opacity: 1
});
</script>
</body>
</html>
如果你在IE9中查看这个,一旦动画完成,表格就会消失
(注意,如果你重新加载,它可能会切换到IE7文档标准,使用F12工具返回IE9)
问题是由内联CSS仅使用标准opacity规则引起的,而不是filter规则引起的.
请注意,父表单没有问题.
在现实世界中,表格不透明度仅在异步操作完成后才会生成动画.这就是为什么我不能把不透明度放在桌子上.
你怎么建议我克服这个？我想的可能是CSS中的IE条件版本代码,或者可能是一些额外的JavaScript.我也可以停止使用似乎也可以修复它的表格,但我想知道你会推荐什么.
编辑:如果你想知道我为什么使用表格.
我使用以下布局.
label A: [input ]
label Second: [input ] [button]
我在这里找到的优点是
备选方案A: Div左对齐.使用第一行上的可见性隐藏按钮,以获得精确宽度的空白空间,以实现一致对齐. …
我有这些元素,我需要选择ul里面的li,其中opacity = 1.我怎样才能做到这一点？
<ul class="class" id="ul">
<li style="width: 100%; list-style: none outside none; position: absolute; top: 0px; left: 0px; z-index: 98; opacity: 0;"><a title="title1" href=""><img alt="alt" class="class_name" src="/images/7dfc294d5c3bcebecb2ec0e44fd27d1c.jpg"></a></li>
<li style="width: 100%; list-style: none outside none; position: absolute; top: 0px; left: 0px; z-index: 98; opacity: 0;"><a title="title2" href=""><img alt="alt" class="class_name " src="/images/a9c9eb42934df4576b352d88f607f292.jpg"></a></li>
<li style="width: 100%; list-style: none outside none; position: absolute; top: 0px; left: 0px; z-index: 98; opacity: 0;"><a title="title3" href=""><img alt="alt" class="class_name " src="/images/b64264692c0d648068c9d1380e9099c1.jpg"></a></li>
<li style="width: 100%; list-style: none outside …我想减慢.opacity CSS属性中的动画时序.就像,我希望它延迟0.2ms或类似的东西.
为了获得更好的想法,在我的网站上悬停一个精选帖子时添加了不透明度:http://www.thetechnodaily.com
记住:我没有使用jQuery.它的纯CSS.
我的jquery知识上有点(更像是一个非常生锈的).出于某种原因,当绿色的盒子悬停在上面时,我无法弄清楚我在这里错过了什么让蓝色盒子褪色.
剧本:
$(document).ready(function() {
$(".hover-text").hover({
$(".hover-hide").animate({
opacity: 0.4,
}, 500);
});?
html:
<div class="hover-hide">
<div class="hover-text">
BLAH
</div>
</div>
css:
.hover-hide{
width:200px;
height:200px;
background-color:blue;
padding:30px;
}
.hover-text{
color:white;
background-color:green;
padding:10px;
width:auto;
margin-top:20px;
}??
非常感谢!:)
在以下设置中,为什么click事件(和任何其他指针事件)不会被触发？
如果删除该opacity: 0.5行,它将正常工作.
对于后人,如果有史以来的jsfiddle下降(12月21日是接近):
HTML:
<div>
<a>Click</a>
<p>Paragraph</p>
</div>
CSS:
div { position: relative; margin: 40px; }
a { position: absolute; top: 0; right: 0; }
p { opacity: 0.5; }
JS:
$(document).ready(function(event) {
$("a").click(function(event) {
alert("Alert");
});
});
(在最新稳定的Chrome和Firefox中测试过)
我是JQuery的新手,我确信答案是超级基本的.但如果有人能够指出我的方向是正确的,那就太好了.我只是希望我的标题的不透明度从0变为1,因为用户滚动超过400像素.救命？www.HULU.com有一个完美的例子.
<code>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 400) {
$('.header').css("background", "#000");
} else {
$('.header').css("background", "transparent");
}
});
});
</script>
</code>
我想得到这里显示的效果:
http://jsfiddle.net/abalter/k8G3C/
背景图像是透明的.徽标和文字叠加.
问题是,我希望背景图像重复.宽视口很好,但当视口变窄时,文本会通过图像的底部.
如果我做:
body {
background: url(...);
opacity: 0.6;
background-repeat: repeat-y;
}
然后背景在y方向重复,但所有子元素也变得透明.我还没有找到一种方法,在没有子元素的情况下使图像透明.
我正在格式化背景图像,使其与视口一起缩放,但始终居中 - 图像的中间始终位于中间.("CSS-Only Technique#2")
有什么建议？
transparency background-image opacity css3 background-repeat
opacity ×10
css ×6
jquery ×5
css3 ×2
transparency ×2
animation ×1
attributes ×1
hover ×1
html-table ×1
inheritance ×1
javascript ×1
performance ×1
scroll ×1
seo ×1