相关疑难解决方法(0)

我有一个图像,我稍后将使用javascript动态填充src,但为了方便起见,我希望图像标记存在于pageload但不显示任何内容.我知道<img src='' />是无效的,那么最好的方法是什么？

我需要更改<img>源URL hover.

我试过这个但是不行:

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

的jsfiddle

任何帮助,将不胜感激.

更新:

这仅适用于Webkit/Google Chrome.

我需要在CSS中定义一个<img>的src属性.有没有办法指定这个属性？

我有一个网站,其图像具有src属性,我想用我自己的图像更改该图像的src位置.图像存在于div组件中.我无法更改HTML,我正在寻找使用CSS更改它的方法.

Div组件:

<div class="application-title">
<img style="margin-top: 3px;height: 45px;" src="image.svgz">
</div>

图像组件(CSS文件):

.application-title IMG
{
    float: left;
    margin-top: 5px;
    margin-right: 10px;
    opacity: 1;
    margin-left: 0px;
    visibility: hidden;
}

我正在尝试用css更改img src(不是后台img src)

<img id="btnUp" src="img/btnUp.png" alt="btnUp"/>  

#btnUp{
    cursor:pointer;
}
#btnUp:hover{
    src:img/btnUpHover; /* is this possible ? It would be so elegant way.*/
}

我正在尝试设计a <header>并且它在IE中不起作用.我正在使用Modernizr,但我已经尝试了shiv.

示例代码

<section>
  <header>
    <h1>Title</h1>
  </header>
  <p>Body</p>
</section>

风格:

section {
    border: 2px dotted black;
    padding: 0.25em;
}

header h1 {
    background-color: #ccc;
    text-align: center;
    margin: 0;
}

我希望在标题和部分内容周围有一个边框,但是只有一个'['看起来边框,标题在它下面.

什么出错了？

我正在使用一个firefox插件的Stylish编写代码来改变显示的图像.

image属性没有div标签,所以我必须使用它:

img[src*="s_dschjungelplanet"]{
##########
}

因此,这将在img src中的页面中的任何位置替换"s_dschjungelplanet".

所以我的主要问题是我不知道如何告诉它替换src ="xxx".

Ta回复

有谁知道如何从CSS控制图像源？

我需要能够从CSS更改图像src.我有循环打印< img id=.. >标签,并为每个id它不同的图像.我希望能够通过样式css区域中的id设置源代码.

有谁知道如何做到这一点？

我正在为像这样的css的图像设置src

#Banner {
content: url(../Banners/prussia-awesomeness.gif);
width: 1000px;
}

这是我的形象

   <div id="Header" class="Header">
        <img id="Banner" src="as"/>
    </div>

使用正确的img src加载谷歌浏览器中的图像(../Banners/prussia-awesomeness.gif)

在Internet Explorer和Firefox中,它将src保持为"as".

ie和ff不支持从css加载图像源吗？

编辑:

加入

#Banner:after {
content: url(../Banners/prussia-awesomeness.gif);
width: 1000px;
}

使它在Firefox中工作,但仍然拒绝合作.

还尝试添加:before(with:和::),这在任何浏览器中都没有区别

我们目前正在为移动设备构建一个网站.支持的操作系统和浏览器应该是:

• Android 4.x(股票浏览器,谷歌浏览器)
• iOS6 +(Safari,谷歌浏览器)

为了支持高分辨率显示,我们评估了各种技术和库,以便用高分辨率吊坠自动替换图像:

尝试1:retina.js http://retinajs.com/

第一次尝试使用这样的普通<img>标签:<img src="foo.png">并使用retina.js让它自动用视网膜图像的名称(foo@2x.png)替换src属性.这有效但有两个缺点:首先,它会产生不必要的开销,因为原始和视网膜图像都会加载,其次,如果没有可用的视网膜图像,它将导致服务器日志上出现大量404错误我们不想要.

尝试2:picturefill.js https://github.com/scottjehl/picturefill

这个框架使用一些基于<span>元素的奇怪的html标记.对我来说,好像作者试图模仿所提议的<picture>元素而不是标准(尚未),请参阅http://picture.responsiveimages.org - 由于奇怪的标记,我不喜欢这种方法.对我来说,用语法描述带有跨度的图像是没有意义的.

尝试3:通过CSS属性background-image替换图像

我看到有时人们使用CSS媒体查询来检测视网膜显示,然后在具有更高或更低解决方案图片的div(或类似元素)上设置背景图像.我个人不喜欢这种方法,因为它完全不鼓励创建语义上好的标记<img src="foo.png">.我无法想象用div创建一个网站,然后将所有图像设置为背景图像 - 这感觉非常奇怪.

尝试4:通过CSS属性内容设置图像:url(...)

正如这里提出的那样可以在CSS中设置img标签的src属性的等价物吗？似乎可以使用属性通过CSS覆盖img标签中的src属性content:url().现在,这是计划:我们为每个图像设置了img标签,在其src属性中引用了一个透明的空白1x1 png,如下所示:<img id="img56456" src="transp_1x1.png" alt="img description">.现在这在语义上是正确的,并且对W3C验证器也有效.然后我们加载一个CSS样式表,通过Media Queries设置网站上的所有图像.

例:

#img56456{content:url(foo.png)}
@media (-webkit-min-device-pixel-ratio: 2){ 
    #img56456{content:url(foo@2x.png)}
}

现在,这种方法效果很好:

• 没有开销
• 坚实的标记
• 适用于所需的设备/浏览器
• 这里不要求SEO图像

现在,这种方法会导致我们没有想到的任何副作用吗？我只是问,因为我知道它有效,但有点"感觉"奇怪的是通过CSS设置所有图像我也发现这个方法对SO的评论是否有可能在CSS中设置img标签的src属性的等价物？:

"值得补充的是,即使在支持将内容分配给img的浏览器中,它也会改变其行为.图像开始忽略大小属性,而在Chrome/Safari中,它会丢失上下文菜单选项,如"保存图像".这是因为分配了内容有效地将img从空的替换元素转换为类似 <span><img></span>"

这可能是个问题吗？(我没有注意到任何尺寸问题,并且上下文菜单不是必需的)