是否可以在CSS中设置src属性值? 在大多数情况下,我们这样使用它:
<img src="pathTo/myImage.jpg" />
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
我想知道是否有一种方法可以做到这一点,而不使用CSS中的background或background-image属性。
是否可以在CSS中设置src属性值? 在大多数情况下,我们这样使用它:
<img src="pathTo/myImage.jpg" />
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
}
我想知道是否有一种方法可以做到这一点,而不使用CSS中的background或background-image属性。
当前回答
在一个“控制”容器中放置几张图像,并更改容器的类。在CSS中,根据容器的类添加规则来管理图像的可见性。这将产生与改变单个图像的img src属性相同的效果。
HTML:
<span id="light" class="red">
<img class="red" src="red.png" />
<img class="yellow" src="yellow.png" />
<img class="green" src="green.png" />
</span>
CSS:
#light { ... }
#light * { display: none; } // all images are hidden
#light.red .red { display: inline; } // show red image when #light is red
#light.yellow .yellow { display: inline; } // .. or yellow
#light.green .green { display: inline; } // .. or green
注意,它将预加载所有图像,就像CSS的backround-images,但不像通过JS更改img src。
其他回答
他们是对的。IMG是内容元素,CSS是设计元素。 但是,当您出于设计目的使用某些内容元素或属性时,情况又会如何呢? 我有IMG跨我的网页,必须改变,如果我改变样式(CSS)。
好吧,这是一个解决方案定义IMG表示(不是真正的图像)在CSS风格。
创建一个1x1透明GIF或png。 将IMG的属性“src”分配给该图像。 在CSS样式中用“background-image”定义最终的表示形式。
它的工作就像一个魅力:)
使用CSS,这是做不到的。但是,如果你正在使用JQuery,像这样的东西可以做到:
$("img.myClass").attr("src", "http://somwhere");
或者你也可以这样做我在网上找到的。
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
<img src="linkToImage.jpg" class="egg">
.egg {
width: 100%;
height: 0;
padding: 0 0 200px 0;
background-image: url(linkToImage.jpg);
background-size: cover;
}
这样可以有效地隐藏图像和填充背景。哦,这是一个黑客,但如果你想要一个IMG标签与alt文本和背景,可以不使用JavaScript缩放?
在我现在正在做的一个项目中,我创建了一个英雄块树枝模板
<div class="hero">
<img class="image" src="{{ bgImageSrc }}"
alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
为了重申之前的解决方案并强调纯CSS实现,这里是我的答案。
如果您从另一个站点获取内容,因此无法控制所交付的HTML,则需要使用纯CSS解决方案。在我的案例中,我试图删除授权源内容的品牌,以便被授权方不必为他们购买内容的公司做广告。因此,我删除了他们的标志,而保留了其他一切。我要提醒一下,这是我客户合同规定的。
{ /* image size is 204x30 */
width:0;
height:0;
padding-left:102px;
padding-right:102px;
padding-top:15px;
padding-bottom:15px;
background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
在一个“控制”容器中放置几张图像,并更改容器的类。在CSS中,根据容器的类添加规则来管理图像的可见性。这将产生与改变单个图像的img src属性相同的效果。
HTML:
<span id="light" class="red">
<img class="red" src="red.png" />
<img class="yellow" src="yellow.png" />
<img class="green" src="green.png" />
</span>
CSS:
#light { ... }
#light * { display: none; } // all images are hidden
#light.red .red { display: inline; } // show red image when #light is red
#light.yellow .yellow { display: inline; } // .. or yellow
#light.green .green { display: inline; } // .. or green
注意,它将预加载所有图像,就像CSS的backround-images,但不像通过JS更改img src。