css或者jquery对图片的设置
设置图片（一张横幅海报，宽800px）要求实现：中间清晰，向两遍渐渐消失（隐藏）用css或者jquery写。...
设置图片（一张横幅海报，宽800px）要求实现：中间清晰，向两遍渐渐消失（隐藏）
用css或者jquery写。 展开
用css或者jquery写。 展开
3个回答
展开全部
两种方法：
创建一个和海报等高等宽的层，设置其绝对定位，位于海报上方，再使用CSS3的linear-gradient属性对该层进行透明度渐变。（缺点：IE6-9均不支持）
创建一个和海报等高等宽的层，再绘制一张和该层一样大的渐变png图片（png-24），设置该层的背景为该图片，且设置该层绝对定位，位于海报上方。（缺点：IE6不支持）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变海报</title>
<style>
h2, .banner {width: 800px; margin: 10px auto; font-size: 16px; color: #666;}
.banner {height: 480px; border: 1px solid #545454; background: #fff url(../img/banner_800x480.jpg) no-repeat;}
.cover-css3, .cover-png {position: absolute; width: 800px; height: 480px;}
.cover-css3 {
background-image: -webkit-linear-gradient(to right,rgba(255,255,255,.9) 5%,rgba(255,255,255,0) 50%,rgba(255,255,255,.9) 95%);
background-image: -moz-linear-gradient(to right,rgba(255,255,255,.9) 5%,rgba(255,255,255,0) 50%,rgba(255,255,255,.9) 95%);
background-image: -o-linear-gradient(to right,rgba(255,255,255,.9) 5%,rgba(255,255,255,0) 50%,rgba(255,255,255,.9) 95%);
background-image: linear-gradient(to right,rgba(255,255,255,.9) 5%,rgba(255,255,255,0) 50%,rgba(255,255,255,.9) 95%);
}
.cover-png {background: url(../img/cover_800x2.png) repeat-y;}
</style>
</head>
<body>
<h2>方法1：CSS3渐变法</h2>
<div class="banner">
<div class="cover-css3"></div>
</div>
<h2>方法2：png图片模拟法</h2>
<div class="banner">
<div class="cover-png"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用css3的渐变属性可以实现。设置RGB颜色模式的时候使中间透明，两边半透明即可。
追问
可否写段代码示范？谢谢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
渐变色直接在用PS设置好，然后输出到png格式的图片不就好了么
追问
ps处理出来是一张图片，如果有很多很多图片，就会显得比较麻烦。用css等方法显示成这种效果，则更改一下图片地址，网页上就能出现效果。
要实现我描述的效果应该怎么写代码？
追答
CSS估计办不到，用js吧，我不会js
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
