js 设置background

1，background:url('+data.image_url+') no-repeat center top"这里错误；这个有报错么？

2，如果没有报错，a想要设置背景需要给a加上宽高和display:block。

最近项目里需要实现这么个功能 类似网游中的聊天框 背景都是透明的 但是文字是不透明 所以如果简单的使用opacity(非IE)和alpha滤镜(IE)是无法实现这个效果的 会造成全部透明

解决办法如下

实现完全透明

设置background为transparent即可 两个浏览器通用

实现透明度可调节

要求改透明度 这里IE和非IE需要分开处理

非IE浏览器可通过支持CSS 的方式处理（不支持CSS 的这里忽略了） css的写法是

background color:rgba( )

前面 个参数是RGB 最后个是透明度

IE浏览器需要使用gradient滤镜 css写法是

filter: progid:DXImageTransform Microsoft gradient(startColorstr=# ffffff endColorstr=# ffffff)

摘录CSS手册说明用法

语法

filter : progid:DXImageTransform Microsoft Gradient ( enabled= bEnabled startColorStr= iWidth endColorStr= iWidth )

属性

enabled  :  可选项 布尔值(Boolean) 设置或检索滤镜是否激活 true | false true  :  默认值 滤镜激活

false  :  滤镜被禁止

startColorStr  :  可选项 字符串(String) 设置或检索色彩渐变的开始颜色和透明度

其格式为 #AARRGGBB AA RR GG BB 为十六进制正整数 取值范围为 – FF RR 指定红色值 GG 指定绿色值 BB 指定蓝色值 参阅 #RRGGBB 颜色单位 AA 指定透明度 是完全透明 FF 是完全不透明 超出取值范围的值将被恢复为默认值

取值范围为 #FF – #FFFFFFFF 默认值为 #FF FF 不透明蓝色

EndColorStr  :  可选项 字符串(String) 设置或检索色彩渐变的结束颜色和透明度 参阅 startColorStr 属性 默认值为 #FF 不透明黑色

特性

Enabled  :  可读写 布尔值(Boolean) 参阅 enabled 属性

GradientType  :  可读写 整数值(Integer) 设置或检索色彩渐变的方向 |   :  默认值 水平渐变

  :  垂直渐变

StartColorStr  :  可读写 字符串(String) 参阅 startColorStr 属性

StartColor  :  可读写 整数值(Integer) 设置或检索色彩渐变的开始颜色 取值范围为 – 为透明 为不透明白色

EndColorStr  :  可读写 字符串(String) 设置或检索色彩渐变的结束颜色和透明度 参阅 startColorStr 属性 默认值为 #FF 不透明黑色

EndColor  :  可读写 整数值(Integer) 设置或检索色彩渐变的结束颜色 取值范围为 – 为透明 为不透明白色 当在脚本中使用此特性时 也可以用十六进制格式 xAARRGGBB

说明

在对象的背景和内容之间显示定制的色彩层

当此效果通过转变显示时 在渐变册色彩层之上的文本程序性的初始化为透明的 当色彩渐变实现后 文本颜色会以其定义的值更新

补充完美支持IE 和IE

这么写在IE 和IE 中会有点小问题 原因是使用transparent的背景时 鼠标居然能点到透明层后面的内容 还会造成部分事件的实效 解决办法是在外面套个div 然后给他加个完全透明的背景图（PNG） 写法参考

background:url( )!importantbackground:none_filter:progid:DXImageTransform Microsoft AlphaImageLoader(src= sizingMethod= scale

这样在里面被嵌套的div点击就不会点到最外面的内容了 当然非IE就不需要加这个了

另外 对于不支持CSS 的浏览器 还有个解决办法就是把背景层和显示文字的层分开处理 放在同一级 只是通过位置上的调整做到看似有层级关系 这样使用透明效果就直接做也不会对文字有影响了

补充

IE 下 上述办法仍然无效 解决办法是套层iframe 在代码里可以这么写

lishixinzhi/Article/program/Java/JSP/201311/19841

可以使用js的连接符实现动态改变background:url()值。

具体步骤如下：

需要准备的材料分别是：电脑、浏览器、ultraedit。

1、在ue编辑器中新建一个空白的html文件，js文件。

2、在ue编辑器中输入以下html代码。

3、在ue编辑器中输入以下js代码。

4、编辑完成以后，在ue编辑器中点击保存，格式选择UTF8无BOM。

5、在浏览器中打开此html文件，可以看到最终想要实现动态改变background:url()值效果。

---