是否能够在CSS中设置img标签的src属性的等效项？

时间 2020-01-16

标签是否能够 css 设置 img 标签 src 属性等效栏目 CSS 繁體版

原文原文链接

是否能够在CSS中设置src属性值？目前，我正在作的是： css

<img src="pathTo/myImage.jpg"/>

我但愿它像这样 html

<img class="myClass" />

.myClass {
    some-src-property: url("pathTo/myImage.jpg");

我想不使用CSS中的background或background-image:属性来执行此操做。 web

#1楼

我今天发现了一个解决方案（可在IE6 +，FF，Opera，Chrome中运行）：网络

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

这个怎么运做： mvvm

图像将缩小，直到宽度和高度再也不可见。
而后，您须要使用填充“重置”图像尺寸。这给出了一个16x16的图像。固然，您能够使用padding-left / padding-top制做矩形图像。
最后，使用背景将新图像放置在那里。
若是新的背景图像太大或过小，建议使用background-size ，例如： background-size:cover; 使您的图像适合分配的空间。

它也适用于提交输入图像，它们保持可点击状态。 ide

观看现场演示： http : //www.audenaerde.org/csstricks.html#imagereplacecss 工具

请享用！测试

#2楼

若是您尝试根据项目的上下文动态在按钮中添加图像，则能够使用？根据结果参考来源。在这里，我使用mvvm设计，让个人Model.Phases [0]值肯定我是否但愿基于灯光相位的值在个人按钮上填充打开或关闭的灯泡图像。 url

不肯定是否有帮助。我正在使用JqueryUI，Blueprint和CSS。类定义应容许您根据本身的喜爱为按钮设置样式。 spa

<button>                           
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>                             
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>   
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>

#3楼

我发现了比提出的解决方案更好的方法，可是它确实使用了背景图像。 兼容方法（没法确认IE6）信用： http : //www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

CSS：

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

看不到旧图像，而新图像则符合预期。

如下简洁的解决方案仅适用于webkit

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}

#4楼

使用content:url("image.jpg") 。

完整的工做解决方案（实时演示）：

<!doctype html> <style> .MyClass123{ content:url("http://imgur.com/SZ8Cm.jpg"); } </style> <img class="MyClass123"/>

通过测试和工做：

铬14.0.835.163
Safari 4.0.5
Opera 10.6

通过测试，没法正常工做：

FireFox 40.0.2（观察开发人员网络工具，您能够看到已加载URL，但未显示图像）
Internet Explorer 11.0.9600.17905（URL永远不会加载）

#5楼

个人答案是重申先前的解决方案并强调纯CSS实现。

若是您要从另外一个站点采购内容，所以您没法控制所提供的HTML，则须要Pure 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);
}